网页设计与制作教材电子版常州seo外包公司

CSS3 相较于之前版本，增加了很多新属性和特性，使网页设计更具表现力和灵活性。以下是一些重要的 CSS3 新属性和特性，按照功能分类列举：

一、布局相关

1. Flexbox 布局

   • display: flex;
   • 常用属性：justify-content, align-items, flex-direction, flex-wrap, align-content, flex-grow, flex-shrink, flex-basis

2. Grid 布局

   • display: grid;
   • 常用属性：grid-template-columns, grid-template-rows, grid-gap, grid-area, justify-items, align-items

---

二、背景和渐变

1. 渐变背景

   • 线性渐变：background: linear-gradient();
   • 径向渐变：background: radial-gradient();
   • 重复渐变：background: repeating-linear-gradient();

2. 多重背景

   • background-image: url(image1), url(image2);

---

三、边框和阴影

1. 圆角边框

   • border-radius: 10px;

2. 边框图片

   • border-image: url(border.png) 30 round;

3. 盒阴影

   • box-shadow: 10px 10px 5px #888;

4. 文本阴影

   • text-shadow: 2px 2px 5px #333;

---

四、动画和过渡

1. 过渡效果

   • transition: all 0.3s ease;

2. 动画效果

   • animation: slide 2s infinite;
   • @keyframes slide { from { left: 0; } to { left: 100px; } }

---

五、文本效果

1. 自定义字体

   • @font-face { font-family: 'MyFont'; src: url('myfont.woff2'); }

2. 文字换行控制

   • word-wrap: break-word;
   • word-break: break-all;

---

六、颜色和透明度

1. RGBA 和 HSLA 颜色

   • color: rgba(255, 0, 0, 0.5);
   • color: hsla(120, 100%, 50%, 0.3);

2. 不透明度

   • opacity: 0.8;

---

七、盒模型增强

1. 盒子大小控制

   • box-sizing: border-box;

2. 轮廓线增强

   • outline-offset: 5px;

---

八、媒体查询和响应式设计

1. 媒体查询

   • @media screen and (max-width: 600px) { ... }

2. 视口单位

   • vw, vh, vmin, vmax

---

九、过滤效果

1. 滤镜效果
   • filter: blur(5px);
   • filter: grayscale(50%);

---

十、变换和透视

1. 2D 变换

   • transform: rotate(45deg);
   • transform: scale(1.5);

2. 3D 变换

   • transform: rotateX(45deg) rotateY(30deg);
   • perspective: 1000px;

---

总结

CSS3 引入了大量增强页面布局和视觉效果的新特性，尤其是在响应式布局、动画效果和视觉美化方面有了很大提升。作为前端开发者，掌握这些特性可以让页面效果更加生动和现代化。