CSS---CSS盒子模型--圆角边框、盒子阴影、文字阴影---7.6

圆角边框（重点）

在CSS中新增了圆角边框样式，这样我们的盒子就可以变圆角了。

border-radius：length；（radius半径原理：椭圆与边框的交集形成圆角的效果）

参数值可以为数值或百分比的形式。

如果是正方形，想要设置为一个圆，就把数值改为高度或宽度的一半即可，或直接写50%。

如果是矩形，设置为高度的一半就可以。

该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角（顺时针）

分开写：
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

---

---

---

盒子阴影

CSS中新增了盒子阴影，box-shadow属性为盒子添加阴影。

box-shadow：h-shadow v-shadow blur spread color inset；

 注意：

1.默认的是外阴影(outset)，但是不可以写这个单词outset，否则导致阴影无效
2.盒子阴影不占用空间，不会影响其他盒子排列。

当鼠标经过盒子就显示阴影效果：

div：hover { 
     box-shadow: 10px 10px 10px -4px rgba(0,0,0,.3) ; 
           }

---

---

---

文字阴影（了解即可）

CSS中可以使用text-shadow属性将阴影应用于文本。

text-shadow：h-shadow v-shadow blur color;