.box { /*圆角*/ border-radius: 5px; /*阴影*/ box-shadow: 2px 2px 5px #888888; /*渐变色*/ background: linear-gradient(to bottom right, #005AA7, #FFFDE4); /*动画*/ animation: spin 2s infinite linear; } @keyframes spin { to {transform: rotate(360deg);} }
1. 圆角(border-radius):可以给元素的边角设置圆角,不再像以前只能用图片模拟圆角。
2. 阴影(box-shadow):可以给元素添加阴影效果,有美化效果。除了可以设置阴影的偏移量外,还能设置阴影的模糊度和颜色。
3. 渐变色(linear-gradient):可以给元素添加线性渐变色,比单一颜色更具有层次感。可以指定起点和终点,也可以指定角度和颜色停止时的位置。
4. 动画(animation):可以为元素定义动画效果,比如旋转、放大、缩小等效果。关键帧动画可以自定义元素的样式,让动画更加多样化。
除此之外,CSS3中还有众多的样式可供选用。总的来说,CSS3为前端开发提供了更多的样式选择,丰富了网页的呈现效果,同时还支持响应式布局和多设备适应,是网页设计的重要工具之一。