CSS3新增边框样式

发布时间：2024年01月09日

边框样式

概念:在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>

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

文章来源:https://blog.csdn.net/AIMing_byte/article/details/135491357
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！