CSS3精华：10个常用命令详解（圆角与盒阴影）

本文将详细介绍CSS3中的两个重要特性——边框圆角（BorderRadius）和盒阴影（BoxShadow），这两个功能对于提升网页设计的视觉效果至关重要。 1. **边框圆角（BorderRadius）** CSS3的`border-radius`属性使得创建圆角边框变得异常简单。以前使用div实现圆角往往需要繁琐的技巧或依赖背景图片，但在CSS3中，只需几行代码就能轻松实现。例如，下面的代码设置了1像素实线边框和20像素的圆角： ```css #box1 { border: 1px solid #699; -moz-border-radius: 20px; /* Firefox */ -webkit-border-radius: 20px; /* Safari & Google Chrome */ } ``` 这个属性接受四个值，分别对应左上、右上、右下和左下的圆角半径，如果只提供一个值，所有角都是相同的。 2. **盒阴影（BoxShadow）** `box-shadow`属性允许元素添加阴影效果，增强了元素的立体感。下面的代码展示了如何为一个div添加阴影，包括水平偏移、垂直偏移、模糊半径和颜色： ```css #box1 { border: 1px solid #699; -moz-box-shadow: 5px 5px 5px #b6ebf7; /* Firefox */ -webkit-box-shadow: 5px 5px 5px #b6ebf7; /* Safari & Chrome */ width: 100px; height: 100px; margin-left: 100px; margin-top: 100px; background-color: Gray; border-color: Yellow; } ``` 参数解释如下： - 第一个参数：水平偏移量（正值为右，负值为左）。 - 第二个参数：垂直偏移量（正值为下，负值为上）。 - 第三个参数：阴影模糊半径，定义阴影的扩散程度。 - 第四个参数：阴影的颜色。 请注意，`text-shadow`属性与`box-shadow`类似，但专门用于文本，可以设置文本前后的阴影效果。 通过掌握这些CSS3的顶级命令，开发者可以更加灵活地控制网页元素的外观，提升用户体验，尤其是在设计响应式和现代Web设计时，它们的应用尤为广泛。学习并熟练运用这些技术，能让网页设计更具吸引力和专业性。