css3基本语法.docx

CSS3是层叠样式表（Cascading Style Sheets）的第三个主要版本，它引入了许多新的特性和改进，极大地增强了网页的视觉表现力和交互性。以下是对这些知识点的详细解释： 1. **圆角效果** (border-radius): CSS3允许通过`border-radius`属性为元素的边框设置圆角，例如`border-radius: 10px;`可以创建一个10像素的圆角。 2. **边框阴影** (box-shadow): `box-shadow`属性用于添加阴影效果，如`box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.5);`表示X轴正方向偏移2像素，Y轴正方向偏移2像素，阴影模糊半径为5像素，颜色为黑色的透明度50%。 3. **外阴影** (outset shadow): 除了内阴影（inset），`box-shadow`也可以设置外阴影。 4. **边框图像** (border-image): 使用`border-image`属性可以将图片应用到边框上，例如`border-image: url(borderimg.png) 70 repeat;`表示使用图片`borderimg.png`，重复70%填充边框。 5. **RGBA颜色** (rgba): `rgba()`函数允许指定颜色并提供透明度，如`color: rgba(255, 0, 0, 0.5);`创建一个半透明的红色。 6. **线性渐变** (linear-gradient): `linear-gradient()`可以创建从一种颜色平滑过渡到另一种颜色的效果，如`background: linear-gradient(to top left, blue, red);`从左上角到右下角由蓝色渐变至红色。 7. **文本溢出处理** (text-overflow): `text-overflow`属性控制当文本溢出其容器时的行为，例如`text-overflow: ellipsis;`会显示省略号来表示内容被截断。 8. **嵌入字体** (@font-face): 使用`@font-face`规则可以将自定义字体引入到网页中，以便在用户计算机没有该字体的情况下仍能正确显示。 9. **文本阴影** (text-shadow): `text-shadow`属性添加文本阴影，如`text-shadow: 2px 2px 3px #000;`设置2像素的X轴偏移，2像素的Y轴偏移，3像素的模糊半径，以及黑色阴影。 10. **背景起源** (background-origin): `background-origin`属性决定了背景图片的定位参考点，可以是`border-box`、`padding-box`或`content-box`。 11. **背景裁剪** (background-clip): `background-clip`控制背景图片的显示范围，如`background-clip: padding-box;`让背景只在内边距区域显示。 12. **背景大小** (background-size): `background-size`用于设置背景图片的尺寸，可以是`auto`、固定长度值、百分比或`cover`（保持宽高比填充容器）或`contain`（保持宽高比并在容器内显示完整图片）。 13. **多个背景** (multiple backgrounds): CSS3允许在单个元素上设置多个背景图片，通过逗号分隔每个背景定义。 14. **属性选择器** (attribute selectors): 类似于`a[class^=icon]`这样的选择器会选择所有class属性以`icon`开头的`<a>`元素。 15. **结构性伪类选择器** (:root, :not, :empty, :target): 这些伪类选择器提供了更精细的元素选择能力。`:root`选择文档的根元素，`:not`排除匹配特定选择器的元素，`:empty`选择没有任何子元素（包括文本节点）的元素，`:target`选择当前激活的锚点目标。 16. **结构性伪类选择器** (:first-child, :last-child, :nth-child(n), :nth-last-child(n), :first-of-type, :nth-of-type(n), :last-of-type): 这些选择器根据元素在兄弟元素中的位置进行选择，例如`:first-child`选择父元素的第一个子元素，`:nth-child(2n)`选择所有偶数位置的子元素等。 17. **动画播放方向** (animation-direction): `animation-direction`属性用于控制CSS动画的播放方向，可设置为`normal`（默认，顺序播放）、`reverse`（反向播放）、`alternate`（每次循环方向反转）或`alternate-reverse`（首次循环反向，然后每次反转）。这使得动画效果更加丰富和动态。 这些CSS3特性极大地扩展了Web设计者的创意空间，使网页设计变得更加灵活和精美。在实际开发中，熟练掌握这些知识可以创建更具吸引力和用户体验的网页。