CSS3 - 圆角边框、盒子阴影

圆角边框

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

border-radius属性设置元素的外边框圆角

border-radius: length;

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

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

• 如果是矩形，设置为高度的一半就可以做侧边半圆弧矩形

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

  参数值个数	意思
  border-radius: 10px 20px 30px 40px	左上角、右上角、右下角、左下角
  border-radius: 10px 40px	主对角线、副对角线

• 分开写：border-top-left、border-top-right、border-bottom-left、border-bottom-right

radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角的效果，即用一个圆去和盒子的四个角内切。

---

盒子阴影

CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离（阴影的虚实度）
spread	可选，阴影的尺寸
color	可选，阴影的颜色
inset	可选，将外部阴影（outset）改为内部阴影

注意：

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

---

文字阴影

在CSS3中，我们可以使用text-shadow属性将阴影应用于文本。

text-shadow: h-shadow v-shadow blur color

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离（阴影的虚实度）
color	可选，阴影的颜色