CSS3新增边框样式

边框样式

概念:在CSS3中，针对元素边框增加了丰富的修饰属性。

常见的边框样式属性有以下

属性说明
border-radius圆角效果
box-shadow边框阴影
border-image边框背景

border-radius属性

概念：border-radius属性可以为元素添加圆角效果

语法：

border-radius:参数1/参数2;

参数

  • 参数1：表示圆角的水平半径
  • 参数2：表示圆角的垂直半径

border-radius属性跟border、padding、margin等属性相似。border-radius属性同样遵循着值复制的原则，可以为其水平半径和垂直半径设置1~4个参数值，用来表示四角圆角半径的大小

  • 当只有1个参数值时，该参数值代表4个角的圆角半径
  • 当设置2个参数值时，第1个参数值代表左上和右下圆角半径，第2个参数值代表右上和左下圆角半径
  • 当设置3个参数值时，第1个参数值代表左上圆角半径，第2个参数值代表右上和左下圆角半径，第3个参数值代表右下圆角半径
  • 当设置4个参数值时，第1个参数值代表左上圆角半径，第2个参数值代表右上圆角半径，第3个参数值代表右下圆角半径，第4个参数值代表左上圆角半径

注意：如果参数值2省略，则会默认其参数值等于参数2的参数值。此时圆角的水平半径和垂直半径相等

在这里插入图片描述

规律：这里只要按照“左上角，右上角，右下角，左下角"顺时针来记忆就很容易

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				display:inline-block;
				width:100px;
				height:100px;
				margin:10px;
				background-color:blueviolet;
			}
			.a{
				border-radius:20px;
			}
			.b{
				border-radius:20px 30px;
			}
			.c{
				border-radius:20px 30px 50px;
			}
			.d{
				border-radius:20px 30px 50px 10px;
			}
			.e{
				border-radius:50%;
			}
			.f{
				border-radius:20% 40%;
			}
		</style>
	</head>
	<body>
		<div class="a"></div>
		<div class="b"></div>
		<div class="c"></div>
		<div class="d"></div>
		<div class="e"></div>
		<div class="f"></div>
	</body>
</html>

运行结果
在这里插入图片描述

box-shadow属性

概念：box-shadow属性可以为元素添加阴影效果

语法：

box-shadow:x-offset y-offset blur spread color style;

常用属性

属性值说明
x-offset必选值，表示元素水平阴影的偏移距离，可为负值。由于CSS3采用的是W3C坐标系，因此x-offset取值为正时，向右偏移，取值为负时，向左偏移
y-offset必选值，表示元素垂直阴影的偏移距离，可为负值。由于CSS3采用的是W3C坐标系，因此y-offset取值为正时，向下偏移，取值为负时，向上偏移
blur可选值，表示阴影的模糊半径，只能为正值
spread可选值，表示阴影的扩展半径，只能为正值
color可选值，表示阴影颜色，默认为灰色
style可选值，表示是外阴影还是内阴影，默认为外阴影

多个阴影属性

box-shadow属性设置多个阴影效果，用英文逗号（,）隔开

当设置多个阴影值时，最先写的阴影会显示在最顶层。层叠顺序是从上到下，第一个阴影在最上层

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>box-shadow阴影效果</title>
		<style>
			div{
				display:inline-block;
				width:100px;
				height:100px;
				margin:10px;
				background-color:blueviolet;
			}
			.a{
				box-shadow:10px 8px;
			}
			.b{
				/* 定义阴影的模糊半径 */
				box-shadow:10px 8px 5px;
			}
			.c{
				/* 定义阴影的扩展半径 */
				box-shadow:10px 8px 5px 8px;
			}
			.d{
				/* 定义阴影颜色 */
				box-shadow:10px 8px 5px 8px burlywood;
			}
			.e{
				/* 定义阴影类型 */
				box-shadow:10px 8px 5px 8px burlywood inset;
			}
			.f{
				/* 定义多个阴影 */
				box-shadow:10px 8px 5px 8px burlywood ,10px -8px 5px 8px aqua  inset;
			}
		</style>
	</head>
	<body>
		<div class="a"></div>
		<div class="b"></div>
		<div class="c"></div>
		<div class="d"></div>
		<div class="e"></div>
		<div class="f"></div>
	</body>
</html>

运行结果
在这里插入图片描述

border-image属性

概念：border-image属性用来为边框添加背景图片

语法：

border-image:url() slice/width repeat;

属性值

  • url()：定义图片的路径
  • slice：定义图片边框4条边的切割宽度，依次为上边、右边、下边、左边（顺时针）
  • width：定义边框宽度
  • repeat:定义背景图片的平铺方式
    • repeat：默认值，边框图像会在水平和垂直方向上循环平铺，直到填满边框区域。
    • space：边框图像在水平和垂直方向上均匀分布，如果边框图像的尺寸不能被平铺的尺寸整除，则会忽略较小的部分。
    • round：边框图像在水平和垂直方向上循环平铺，如果某个方向上的平铺不能完整显示，则会缩小图像以适应平铺的尺寸。
    • stretch：边框图像将会被拉伸以填满整个边框区域，不考虑图像的原始比例。

注意：元素设置了border-image属性，该元素还需要设置border属性。这样border-image属性才会起作用

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				display:inline-block;
				width:200px;
				height:100px;
				border:10px solid bisque;
				margin:20px;
				
			}
			.a{
				border-image:url('./image/border.png') 22 repeat;
			}
			.b{
				border-image:url('./image/border.png') 50%/22 repeat;
			}
		</style>
	</head>
	<body>
		<div class="a"></div>
		<div class="b"></div>
	</body>
</html>

运行结果
在这里插入图片描述

border-image是一个复合属性，有以下属性

属性说明
border-image-source定义图片的路径
border-image-slice定义如何裁切边框图像
border-image-width定义边框宽度
border-image-outset定义边框图片向盒子模型外部延伸的距离
border-image-repeat定义背景图片的平铺方式

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>border-image复合属性</title>
		<style>
			div{
				display:inline-block;
				width:200px;
				height:100px;
				border:10px solid bisque;
				margin:20px;
				font-size:20px;
				text-align:center;
				line-height:100px;
				
			}
			.a{
				/* 设置边框图片路径 */
				border-image-source:url('./image/border.png');
				/* 设置边框裁切图像 */
				border-image-slice:33%;
				/* 设置边框宽度 */
				border-width:40px;
				/* 设置边框图片区域超出边框量 */
				border-image-outset:0;
				/* 设置图片显示方式为“repeat” */
				border-image-repeat:repeat;
			}
			.b{
				border-image-source:url('./image/border.png');
				border-image-slice:35%;
				border-width:40px;
			border-image-outset:0;
				/* 设置图片显示方式为“space” */
				border-image-repeat:space;
			}
			.c{
				border-image-source:url('./image/border.png');
				border-image-slice:38%;
				border-width:40px;
				border-image-outset:0;
				/* 设置图片显示方式为“round” */
				border-image-repeat:round;
			}
			.d{
				border-image-source:url('./image/border.png');
				border-image-slice:40%;
				border-width:40px;
				border-image-outset:0;
				/* 设置图片显示方式为“stretch” */
				border-image-repeat:stretch;
			}
		</style>
	</head>
	<body>
		<div class="a">repeat</div>
		<div class="b">space</div>
		<div class="c">round</div>
		<div class="d">stretch</div>
	</body>
</html>

运行结果
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/307584.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

新书速览|循序渐进Vue.js 3.x前端开发实战

新书速览|循序渐进Vue.js 3.x前端开发实战

Vue.js初学者和前端开发人员使用&#xff0c;网课、培训机构与大中专院校的教学用书 作者简介 张益珲 美国亚利桑那州立大学计算机工程技术硕士&#xff0c;架构师&#xff0c;从业近10年&#xff0c;多年大前端开发经验&#xff0c;曾就职于知名上市公司&#xff0c;主导开发…
阅读更多...
Java项目：115SSM宿舍管理系统

Java项目：115SSM宿舍管理系统

博主主页&#xff1a;Java旅途 简介&#xff1a;分享计算机知识、学习路线、系统源码及教程 文末获取源码 一、项目介绍 宿舍管理系统基于SpringSpringMVCMybatis开发&#xff0c;系统主要功能如下&#xff1a; 学生管理班级管理宿舍管理卫生管理维修登记访客管理 二、技术框…
阅读更多...
MyBatis：自定义 typeHandler 处理枚举类型

MyBatis：自定义 typeHandler 处理枚举类型

MyBatis 枚举类型typeHandler 枚举类型 枚举类型&#xff0c;在 Java 中属于基本数据类型&#xff0c;而不是构造数据类型&#xff0c;用于声明一组命名的常数。枚举可以根据 Integer 、Long 、Short 或 Byte 中的任意一种数据类型来创建一种新型变量。这种变量可以设置为已经…
阅读更多...
C++ std::move std::forward

C++ std::move std::forward

std::move 统统转换为&& 右值引用。 std::foreward 有条件的转换。 左值转换为左值引用&#xff0c;右值转换为右值引用。
阅读更多...
超市商品管理系统设计 C++实现

超市商品管理系统设计 C++实现

超市商品管理系统设计—C实现 文章目录 超市商品管理系统设计---C实现一、内容要求大纲图 二、源代码&#xff08;包含大量注释&#xff09;1、main.cpp文件2、supermarket.h文件3、supermarket.cpp文件4、administrator.h文件5、administrator.cpp文件6、user.h文件7、user.cp…
阅读更多...
spring boot + mybatis + websocket + js实战

spring boot + mybatis + websocket + js实战

项目技术&#xff1a;spring boot mybatis websocket js 需求背景&#xff1a;当添加一个女孩时&#xff0c;页面的socket收到消息&#xff0c;打印最新的所有女生list&#xff0c;这样可以进一步在react/vue前端框架下&#xff0c;实现当A用户新增了某业务数据后&#xff…
阅读更多...
Linux--防火墙，实验案例：基于区域、服务、端口的访问控制

Linux--防火墙，实验案例：基于区域、服务、端口的访问控制

实验环境 某公司的Web服务器&#xff0c;网关服务器均采用Linux CentOS 7.3操作系统&#xff0c;如图2.13所示。为了 加强网络访问的安全性&#xff0c;要求管理员熟悉firewalld防火墙规则的编写&#xff0c;以便制定有效、可行的主机防护策略。 需求描述 > 网关服务器ens3…
阅读更多...
视频智能剪辑方案，企业视频制作新时代

视频智能剪辑方案，企业视频制作新时代

视频已经成为了人们获取信息、娱乐和学习的重要方式。然而&#xff0c;传统的视频制作过程繁琐且耗时&#xff0c;这对于许多企业来说无疑是一个巨大的挑战。为了解决这个问题&#xff0c;美摄科技凭借其在机器学习、深度学习等AI算法方面的深厚积累&#xff0c;自主研发了一套…
阅读更多...
小白也能懂！人物百度百科怎么创建？手把手教会你创建人物百科

小白也能懂！人物百度百科怎么创建？手把手教会你创建人物百科

在互联网时代&#xff0c;百度百科已经成为了人们获取信息的重要途径之一。对于名人、企业家、艺术家、专家学者等人物来说&#xff0c;拥有一个完善的百度百科词条不仅能够提升个人形象&#xff0c;还能够为他们的事业发展带来更多的机会&#xff0c;所以很多人都会去选择创建…
阅读更多...
【开源商城推荐-LGPL-3.0】ts-mall 聚惠星商城

【开源商城推荐-LGPL-3.0】ts-mall 聚惠星商城

dts-shop: 聚惠星商城 DTS-SHOP&#xff0c;基于 微信小程序 springboot vue 技术构建 &#xff0c;支持单店铺&#xff0c;多店铺入驻的商城平台。项目包含 微信小程序&#xff0c;管理后台。基于java后台语言&#xff0c;已功能闭环&#xff0c;且达到商用标准的一套项目体…
阅读更多...
用golang 实现给图片添加文字水印

用golang 实现给图片添加文字水印

package mainimport ("fmt""github.com/golang/freetype""image""image/draw""image/jpeg""io""os""time" )func main() {// 打开原始图片file, err : os.Open("004.jpeg")if err …
阅读更多...
加工零件的题解

加工零件的题解

目录 原题描述&#xff1a; 题目描述 输入格式 输出格式 样例 #1 样例输入 #1 样例输出 #1 样例 #2 样例输入 #2 样例输出 #2 提示 题目大意&#xff1a; 主要思路&#xff1a; 但是我们怎么才能判断出x走到1时L是偶数还是奇数呢&#xff1f; 初始化&#xff1a;…
阅读更多...
代客泊车「新赛点」，撬动大市场

代客泊车「新赛点」，撬动大市场

低速泊车&#xff0c;正在从过去被忽视的角色&#xff0c;持续受益高阶智驾和整车智能化升级&#xff0c;重新焕发新生。无论是长距离/跨层记忆泊车、行泊一体、代客泊车&#xff0c;还是硬件复用&#xff0c;这个细分赛道的增长逻辑&#xff0c;正在发生微妙变化。 就在上个月…
阅读更多...
【网络安全】【密码学】【北京航空航天大学】实验一、数论基础（上）【C语言和Java实现】

【网络安全】【密码学】【北京航空航天大学】实验一、数论基础（上）【C语言和Java实现】

实验一、数论基础&#xff08;上&#xff09; 一、实验目的 1、通过本次实验&#xff0c;熟悉相关的编程环境&#xff0c;为后续的实验做好铺垫&#xff1b; 2、回顾数论学科中的重要基本算法&#xff0c;并加深对其的理解&#xff0c;为本学期密码学理论及实验课程打下良好…
阅读更多...
Ubuntu启动Xming报错：cannot open display: :1.0

Ubuntu启动Xming报错：cannot open display: :1.0

Ubuntu启动Xming报错&#xff1a;cannot open display: :1.0 1、问题描述&#xff1a;2、问题解决&#xff1a;3、实践结果&#xff1a; 叮嘟&#xff01;这里是小啊呜的学习课程资料整理。好记性不如烂笔头&#xff0c;今天也是努力进步的一天。一起加油进阶吧&#xff01; 1、…
阅读更多...
# 大模型实战作业02

# 大模型实战作业02

大模型实战作业02 知识库助手搭建 注 有些问题在回答的时候可能出现乱码的情况 可能的原因 模型内部提示词知识库 这部分可以做适当的优化&#xff0c;对于无法回答或回答质量不佳的回答返回特定话术提升用户体验
阅读更多...
《突破自我：2023年度总结与展望》

《突破自我：2023年度总结与展望》

文章目录 引言&#xff1a;回顾过去一年的亮点&#xff1a;面对的挑战及解决方案&#xff1a;JSBridge原理原理介绍实现流程实现思路第一步&#xff1a;设计出一个Native与JS交互的全局桥梁对象第二步&#xff1a; JS如何调用native第三步&#xff1a;Native如何得知api被调用第…
阅读更多...
抽烟识别摄像机

抽烟识别摄像机

抽烟识别摄像机是一种利用计算机视觉和人工智能技术的设备&#xff0c;能够实时监测和识别吸烟行为。该摄像机通过分析人体姿态和动作&#xff0c;识别出可能的吸烟行为&#xff0c;并及时发出警告或报警。这种摄像机可以广泛应用于公共场所、办公场所、学校和医疗机构等地方&a…
阅读更多...
【竞技宝jjb.lol】LOL：ale分析新版本 战士只剩锐雯能玩

【竞技宝jjb.lol】LOL：ale分析新版本 战士只剩锐雯能玩

北京时间2024年1月10日,随着新年的来临,英雄联盟赛事也开启了全新的篇章,如今距离春季赛开启的时间已经越来越近了。为了让选手结束休赛期后恢复到正常的竞技水平,LPL在前不久刚刚进行了德玛西亚杯的比赛,最终BLG决赛横扫宿敌JDG拿下冠军。而新赛季官方也会推出新版本,那么职业…
阅读更多...
[C#]使用winform部署PP-MattingV2人像分割onnx模型

[C#]使用winform部署PP-MattingV2人像分割onnx模型

【官方框架地址】 https://github.com/PaddlePaddle/PaddleSeg 【算法介绍】 PP-MattingV2是一种先进的图像和视频抠图算法&#xff0c;由百度公司基于PaddlePaddle深度学习框架开发。它旨在提供更精准和高效的图像分割功能&#xff0c;特别是在处理图像中的细微部分&#xf…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站