在2D方面,CSS3相对于CSS2主要增加了以下一些新的特性:
/* CSS2 */ div{ background-color:red; border:1px solid black; } /* CSS3新增特性 */ div{ background-image:linear-gradient(red,blue); border-radius:50%; box-shadow:10px 10px 5px #888888; text-shadow:2px 2px 2px #888888; }
其中,background-image
用于设置渐变背景色;border-radius
用于设置圆角;box-shadow
用于设置盒子阴影;text-shadow
用于设置文字阴影。这些新特性都让大家的网页变得更加美观、生动。
而在3D方面,CSS3相对于CSS2又增加了更多的新特性,从而让大家能够实现更为复杂的3D效果,比如3D旋转、3D缩放等等。
/* CSS2 */ div{ position:relative; width:200px; height:200px; background-color:red; } /* CSS3新增特性 */ div{ transform:rotateY(45deg) skew(20deg); perspective:1000px; }
其中,transform
用于设置旋转和倾斜效果;perspective
用于设置透视距离。通过这些3D的特性,大家可以呈现更为生动、立体的页面效果。
CSS3相对于CSS2在2D和3D方面都有了很大的改进,它为大家的网页设计和开发带来了更丰富、更多彩、更生动的体验。