CSS 圆角边框 盒子阴影 文字阴影
目录
1.圆角边框（重点）
2.盒子阴影（box-shadow）
3.文字阴影（text-shadow）
1.圆角边框（重点）
border-radius 属性用于设置元素的外边框圆角。
语法：
border-radius: length;
radius半径（圆的半径）原理:(椭)圆与边框的交集形成圆角效果。
!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>div {width: 300px;height: 150px;background-color: pink;border-radius: 10px;}</style>
</head><body><div><div class="header">C罗</div></div>
</body>使用：语法：border-radius：length;
- 参数值可以为数值或者百分比的形式。
- 如果是正方形，想要设置一个圆，数值为高度或者宽度的一般，百分比为50%。
- 如果是一个矩形，设置为高度的一般。
- 该属性是一个简写属性，可以跟随四个值，分别代表左上角，右上角，左下角，右下角。
- 分开写： border-top-left-radius，border-top-right-radius，border-bottom-right-radius，border-bottom-bottom-radius。
2.盒子阴影（box-shadow）
在css3中新增盒子阴影 box-shadow
语法： box-shadow：h-shadow v-shadow blur spread color inset；
| 值 | 描述 |
| h-shadow | 必需，水平阴影的位置允许负值 |
| v-shadow | 必需，垂直阴影的位置允许负值 |
| blur | 可选，模糊距离 |
| spread | 可选，阴影的尺寸 |
| color | 可选，阴影的颜色，请参照CSS颜色值 |
| inset | 可选，将外部阴影（outset）改为内部阴影 |
半透明：rgba（0,0,0, .3）
注意：
- 默认的是外部阴影（outset）但是不可以写这个单词，否则导致阴影无效。
- 盒子阴影不占空间，不会影响其他盒子排列。
3.文字阴影（text-shadow）
语法：
text-shadow：h-shadow v-shadow blur color ；
| 值 | 描述 |
| h-shadow | 必需，水平阴影的位置允许负值 |
| v-shadow | 必需，垂直阴影的位置允许负值 |
| blur | 可选，模糊距离 |
| color | 可选，阴影的颜色，请参照CSS颜色值 |