1.1圆角边框
image.png
border-radius属性用于设置元素的外边框圆角
border-radius:length;
- 参数值可以是百分比也可以是数值
- 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半，或者直接写为50%
- 如果是个矩形可以设置为高度的一半
- 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
- 分开写：border-top-left-radius、border-top-right-radius、border-bootom-left-radius、border-bottom-right-radius
.yuanxing{
width:200px;
height: 200px;
background-color: pink;
/* border-radius: 100px; */
/* 50%就是宽度和高度的一半，等价于100px */
border-radius: 50%;
}
.juxing{
width: 300px;
height: 100px;
background-color: pink;
/* 圆角矩形设置成高度的一半 */
border-radius: 50px;
}
.radius{
width: 200px;
height: 200px;
border-radius: 10px 20px 30px 40px;
}
1、圆形的做法：
<div class="yuanxing"></div>
2、圆角矩形的做法：
<div class="juxing"></div>
3、可以设置不同的圆角：
<div class="radius"></div>
1.2盒子阴影（重点）
box-shadow:h-shadow v-shadow blur spread color inset;
| 参数值 | 说明 |
|---|---|
| h-shadow | 必须，水平阴影位置，允许负值 |
| v-shadow | 必须，垂直阴影位置，允许负值 |
| blur | 可选，模糊距离 |
| spread | 可选，阴影尺寸 |
| color | 可选，阴影的颜色。参阅CSS颜色值 |
| inset | 可选，将外部阴影（outset)改成内部阴影 |
1.3文字阴影
text-shadow:h-shadow v-shadow blur color;
大致与盒子阴影相同
