24、CSS阴影、轮廓、圆角
2022-06-08 本文已影响0人
小黄不头秃
轮廓 outline
轮廓：和border一样，但是他的设置不会影响页面的布局
55.jpg
54.jpg
边框 border
边框：边框样式属性指定要显示什么样的边界。
可以按顺序设置如下属性：
- border-width
- border-style
- border-color
- border-top-left-radius:50px 100px;椭圆角
- border-radius: 50px 50px 50px 50px;从左上角开始顺时针对每个角进行圆角设置。
/*宽度：5px，实线，红色*/
p
{
border:5px solid red;
}
阴影 box-shadow
官方教程：https://www.w3school.com.cn/css/css3_shadows_box.asp
- 前两个值为偏移量
- 第三个值为模糊像素
- 第四个值是阴影的颜色
div {
box-shadow: 10px 10px 5px grey;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>阴影、轮廓、圆角</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
box-shadow: 5px 5px 50px skyblue;
}
.box1:hover{
outline: 3px solid red;
}
.box2{
width: 200px;
height: 200px;
background-color: #bfa;
border-radius: 50px;
}
</style>
</head>
<body>
<div class="box1">
<p>hello</p>
</div>
<br><br>
<div class="box2">
</div>
<p>hello</p>
</body>
</html>
