CSS3 相较于之前版本,增加了很多新属性和特性,使网页设计更具表现力和灵活性。以下是一些重要的 CSS3 新属性和特性,按照功能分类列举:
一、布局相关
-
Flexbox 布局
display: flex;
- 常用属性:
justify-content
,align-items
,flex-direction
,flex-wrap
,align-content
,flex-grow
,flex-shrink
,flex-basis
-
Grid 布局
display: grid;
- 常用属性:
grid-template-columns
,grid-template-rows
,grid-gap
,grid-area
,justify-items
,align-items
二、背景和渐变
-
渐变背景
- 线性渐变:
background: linear-gradient();
- 径向渐变:
background: radial-gradient();
- 重复渐变:
background: repeating-linear-gradient();
- 线性渐变:
-
多重背景
background-image: url(image1), url(image2);
三、边框和阴影
-
圆角边框
border-radius: 10px;
-
边框图片
border-image: url(border.png) 30 round;
-
盒阴影
box-shadow: 10px 10px 5px #888;
-
文本阴影
text-shadow: 2px 2px 5px #333;
四、动画和过渡
-
过渡效果
transition: all 0.3s ease;
-
动画效果
animation: slide 2s infinite;
@keyframes slide { from { left: 0; } to { left: 100px; } }
五、文本效果
-
自定义字体
@font-face { font-family: 'MyFont'; src: url('myfont.woff2'); }
-
文字换行控制
word-wrap: break-word;
word-break: break-all;
六、颜色和透明度
-
RGBA 和 HSLA 颜色
color: rgba(255, 0, 0, 0.5);
color: hsla(120, 100%, 50%, 0.3);
-
不透明度
opacity: 0.8;
七、盒模型增强
-
盒子大小控制
box-sizing: border-box;
-
轮廓线增强
outline-offset: 5px;
八、媒体查询和响应式设计
-
媒体查询
@media screen and (max-width: 600px) { ... }
-
视口单位
vw
,vh
,vmin
,vmax
九、过滤效果
- 滤镜效果
filter: blur(5px);
filter: grayscale(50%);
十、变换和透视
-
2D 变换
transform: rotate(45deg);
transform: scale(1.5);
-
3D 变换
transform: rotateX(45deg) rotateY(30deg);
perspective: 1000px;
总结
CSS3 引入了大量增强页面布局和视觉效果的新特性,尤其是在响应式布局、动画效果和视觉美化方面有了很大提升。作为前端开发者,掌握这些特性可以让页面效果更加生动和现代化。