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

前端学习笔记教程不定期更新中，传送门：

• 前端HTML第一天：什么是网页？什么是HTML？网页怎么形成？
• HTML标签大全
• 前端学习：表格学习，附练习+源码
• 前端学习之列表，附送全套源码
• CSS入门最全笔记
• CSS样式表
• CSS之emmet语法
• CSS的复合选择器
• CSS的显示模式
• CSS背景：颜色、图片、平铺、背景图片位置、背景图像
• CSS三大特性：叠层性、继承性、优先级
• 前端学习之CSS盒子模型以及PS基础

下面开始继续更新内容，前面链接大家用来查漏补缺哦。

一、圆角边框

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

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

语法：

 border-radius:length; 

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

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

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

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

- 兼容性 ie9+ 浏览器支持, 但是不会影响页面布局,可以放心使用

二、盒子阴影

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

语法：

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

三、文字阴影

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

语法：

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