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企服之家，中国第一个企服评测及商务社交产业平台。