本文共 864 字，大约阅读时间需要 2 分钟。
CSS3作为CSS的升级版，简化了许多复杂的样式操作。它不仅便于开发与维护，还能显著提升网站性能。
圆角在实际应用中屡见不鲜。传统方法通过背景图片实现圆角，而CSS3则提供了更简单的解决方案——通过border-radius属性即可设置圆角半径。
圆角边框的核心属性是border-radius。该属性支持四种值表示四个圆角，或者三种值表示上下左右的圆角，或者两个值表示上下和左右的圆角，甚至单独一个值表示四个圆角相同的大小。
每个圆角也可单独定义，如border-top-left-radius、border-top-right-radius等。这种灵活性极大地简化了圆角的实现
1）绘制圆弧：
运行结果：四个圆角均为50px，形成一个圆弧边框。
2）绘制圆形：
运行结果：这是一个完美的圆形，前提是元素的宽和高相等，且圆角半径等于元素宽度的一半。
CSS3还引入了box-shadow属性，极大地提升了界面美观度。通过box-shadow，可以为元素添加阴影效果，营造层次感。
box-shadow的语法格式为：box-shadow: h-shadow v-shadow blur spread color inset;。其中，前两个属性是必须的，其余属性均可省略。
具体参数说明：
- h-shadow（水平偏移）：阴影在水平方向的偏移量，默认为0。 - v-shadow（垂直偏移）：阴影在垂直方向的偏移量，默认为0。 - blur：阴影的模糊程度，默认为0。 - spread：阴影的扩展程度，默认为0。 - color：阴影颜色，默认为rgba(0,0,0,0.5)。 - inset：阴影位置，默认为 0（阴影在元素外侧）。 1）普通阴影效果：
运行结果：元素左侧和底部均有阴影，阴影的模糊程度适中，透明度为40%。
2）动态阴影效果（hover时）：
运行结果：鼠标悬停时，阴影会扩大并加深，形成动态效果。
转载地址：http://bxffz.baihongyu.com/