HTML5和CSS3结合更富有表现力和视觉吸引力

HTML5 和 CSS3 结合提供了强大的工具来创建富有表现力和视觉吸引力的网页。以下是一些 CSS3 的重要特性和新功能：

1. 新选择器

CSS3 引入了许多新的选择器，帮助开发者更加精确地选择和样式化 HTML 元素：

• 属性选择器：可以选择具有特定属性或属性值的元素。/* 选择具有 data-role 属性的元素 */ [data-role] { color: blue; } /* 选择具有 data-role 属性且属性值为 "admin" 的元素 */ [data-role="admin"] { font-weight: bold; }
• 伪类选择器：
  • :nth-child(n)：选择特定的子元素。/* 选择每个第三个子元素 */ li:nth-child(3n) { color: red; }
  • :not(selector)：选择不匹配指定选择器的元素。/* 选择所有非 class="special" 的 p 元素 */ p:not(.special) { color: gray; }
• 伪元素选择器：
  • ::before 和 ::after：用于在元素内容前后插入内容。/* 在每个 p 元素内容前添加 "Note: " */ p::before { content: "Note: "; font-weight: bold; }

2. 新属性

CSS3 引入了许多新的属性来丰富网页样式：

• background-size：定义背景图像的大小。background-size: cover; /* 图像覆盖整个背景区域 */
• box-shadow：为元素添加阴影效果。box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5); /* 水平偏移、垂直偏移、模糊半径、颜色 */
• text-shadow：为文本添加阴影效果。text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
• border-radius：为元素添加圆角效果。border-radius: 10px; /* 圆角半径 */

3. 动画

CSS3 的动画特性允许开发者为网页元素添加动态效果：

• @keyframes：定义动画的关键帧。@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
• animation：将定义的动画应用到元素上。.animated { animation: slide 1s ease-in-out; }

4. 2D/3D 转换

CSS3 提供了丰富的 2D 和 3D 转换功能：

• 2D 转换：
  • transform: translate(x, y)：移动元素。
  • transform: rotate(angle)：旋转元素。
  • transform: scale(x, y)：缩放元素。
  • transform: skew(x, y)：倾斜元素。
  .box { transform: rotate(45deg) scale(1.2); }
• 3D 转换：
  • transform: rotateX(angle)、transform: rotateY(angle)、transform: rotateZ(angle)：进行 3D 旋转。
  • transform: perspective(value)：设置视角深度。
  .container { perspective: 1000px; } .box { transform: rotateY(45deg) rotateX(30deg); }

5. 圆角

border-radius 属性允许为元素的边框角添加圆角效果：

• 单一圆角：border-radius: 15px; /* 所有四个角都为 15px 圆角 */
• 不同角度圆角：border-radius: 10px 20px 30px 40px; /* 上左, 上右, 下右, 下左 */
• 椭圆形圆角：border-radius: 50% / 25%; /* 椭圆形圆角效果 */

6. 阴影效果

box-shadow 和 text-shadow 属性提供了多种阴影效果：

• box-shadow：用于元素的阴影效果。box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* 水平偏移、垂直偏移、模糊半径、颜色 */
• text-shadow：用于文本的阴影效果。text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);

7. 可下载的字体

CSS3 允许使用 @font-face 规则来引入和使用自定义字体：

示例代码：

@font-face {
    font-family: 'MyCustomFont';
    src: url('path/to/font.woff2') format('woff2'),
         url('path/to/font.woff') format('woff');
}

body {
    font-family: 'MyCustomFont', sans-serif;
}

总结

这些 CSS3 的特性使得网页设计变得更加丰富和灵活，能够创建现代和具有吸引力的用户界面。通过利用这些新功能，你可以创建更具表现力和互动性的 Web 应用。