边框样式
概念:在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://juejin.cn/post/7322664566717169716 作者:小明的Fire计划