4.2 CSS圆角边框、盒子阴影和文字阴影

声明：本人前端学习笔记的所有内容均为b站上pink老师课程的学习笔记，如果想详细了解的可以搜索以下网址：

1. H5C3+移动布局： 黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式布局摹客蓝湖使用-简单有趣好玩
2. JavaScript系列 ：JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts-包含笔记源码作业黑马程序员pink老师前端入门视频教程（持续更新）

---

1.圆角边框

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

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

border-radius: length;

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

• 参数值可以为数值（例如10px）也可以采用百分比的形式
• 设置圆形的方式：设置length为正方形盒子的边长的一半或者直接写成50%；
• 设置圆角矩形的方式：如果是个矩形，直接设置length为高度的一半
• 该属性是一个简写属性，可以跟1个，2个，3个和4个值，与边距的复合属性类似，都是按照顺时针方向，即左上角，右上角，右下角，左下角
• 也可以每个角都单独设置，例如只想要改一左上角，可以设置：boder-top-left-radius: 10px;

2.盒子阴影（重点）

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

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

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

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

原先盒子没有阴影，当鼠标经过时给盒子添加阴影：

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

3. 文字阴影（了解）

在CSS3中，可以使用text-shadow属性设置文字的阴影

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

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