CSS3--边框：圆角、阴影和边框图片

写在前面：很多内容都是对w3cschool教程的复述，深入学习建议w3cschool - 编程狮，随时随地学编程

---

一、圆角

使用border-radios，指定值为数值带单位或者百分比，不同指定值个数带来的圆角效果不同。

• 一个值：四个角使用一样的值
• 二个值：border-radios:左上和右下  左下和右上;
• 三个值：border-radios:左上  右上和左下  右下;
• 四个值：border-radios:左上  右上  右下  左下;

.yuanjiao{
border-radius:25px;
}

 百分比一般用于设定椭圆边角

和很多属性一样，可以分别设定每一个圆角

.yuanjiao{
border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-left-radius:30px;
border-bottom-right-radius:20px;
}

二、盒阴影

使用新增的box-shadow属性。

其基础参数依次为：

box-shadow: 水平偏移距离  垂直偏移距离  模糊半径  扩散半径  阴影颜色;

参数个数不同同样造成的效果不同。