十九、圆角边框&盒子阴影
2021-02-22 本文已影响0人
honest涛
一、 圆角边框（重点）
在CSS3中，新增了样式，这样我们的盒子就可以变圆角了。
image.png
语法：
border-radius:length;
（椭）圆与边框的交集形成圆角效果。
圆角边框.png
- 参数值可以为
或
的形式；
- 如果是
，想要设置为一个圆，把数值修改为
即可，或者直接写为50%；
- 该书属性是一个
，可以跟四个值，分别代表
；
- 分开写：
二、盒子阴影（重点）
CSS3中新增了盒子阴影，我们可以使用属性为盒子添加阴影。
语法：
box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊距离。 |
| spread | 可选。阴影的尺寸。 |
| color | 可选。阴影的颜色。 |
| inset | 可选。将外部阴影(outset)改为内部阴影。 |
三、文字阴影
在CSS3中，我们可以使用属性将阴影应用于文本。
语法：
text-shadow: h-shadow v-shadow blur color;
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊距离。 |
| color | 可选。阴影的颜色。 |
四、案例
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one {
width: 300px;
height: 100px;
background-color: pink;
border-radius: 10px;
}
.two {
width: 200px;
height: 200px;
background-color: pink;
border-radius: 50%;
}
.three {
width: 200px;
height: 100px;
background-color: pink;
border-radius: 50px;
}
.four {
width: 200px;
height: 100px;
background-color: pink;
border-radius: 10px 15px 20px 25px;
}
</style>
</head>
<body>
<div class="one"></div>
<h4>1.圆形的做法</h4>
<div class="two"></div>
<h4>2.圆角矩形的做法</h4>
<div class="three"></div>
<h4>3.可以设置不同的圆角</h4>
<div class="four"></div>
</body>
</html>
