CSS3相比CSS有哪些变化
CSS3是CSS(级别4)的更新版本,引入了许多新特性,包括更强大的选择器、阴影、变换、动画、图像过滤等。
主要的变化包括:
- 选择器:包括属性选择器、结构性伪类选择器等。
- 阴影和图像效果:box-shadow、text-shadow、border-image等。
- 变换和动画:transform、transition、animation等。
- 多列布局:multi-column layout。
- 颜色:增加了更多的颜色值和方式(如RGBA和HSLA)。
- 字体:@font-face规则允许网页下载字体,而不是使用用户系统中的字体。
- 媒体查询:可以根据设备特性(如屏幕尺寸、分辨率等)应用不同的样式。
- 边框和轮廓:border-radius、border-image等。
- 渐进增强和优雅降级:更好地支持不支持CSS3的浏览器。
示例代码:
/* CSS3 阴影效果 */
div {
box-shadow: 10px 10px 5px #888888;
border-radius: 10px; /* 圆角边框 */
}
/* CSS3 动画 */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
div {
animation-name: example;
animation-duration: 4s;
}
/* CSS3 多列布局 */
article {
column-count: 3;
column-gap: 20px;
}
这些新特性使得网页设计师和开发者能创建更为生动和复杂的页面效果。
评论已关闭