css3有哪些新属性
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 引入了大量增强页面布局和视觉效果的新特性，尤其是在响应式布局、动画效果和视觉美化方面有了很大提升。作为前端开发者，掌握这些特性可以让页面效果更加生动和当代化。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]