1. 边框和背景: `borderradius`:用于创建圆角边框。 `boxshadow`:用于添加阴影效果。 `borderimage`:使用图像作为边框。 `backgroundsize`:控制背景图像的大小。 `backgroundorigin` 和 `backgroundclip`:分别用于定义背景的起始位置和裁剪方式。 `backgroundrepeat` 和 `backgroundposition`:控制背景图像的重复和位置。

2. 颜色和透明度: `rgba` 和 `hsla`:分别用于定义带透明度的 RGB 和 HSL 颜色。 `opacity`:用于设置元素的透明度。

3. 字体和文本: `@fontface`:允许自定义字体。 `textshadow`:为文本添加阴影。 `textoverflow`:用于处理文本溢出的情况。 `wordwrap` 和 `wordbreak`:控制单词的换行方式。

4. 过渡和动画: `transition`:用于创建平滑的过渡效果。 `@keyframes`:定义动画的关键帧。 `animation`:用于控制动画的播放。

5. 2D/3D 转换: `transform`:用于应用 2D 或 3D 转换,如旋转、缩放、移动等。 `perspective`:定义 3D 元素的透视效果。

6. 布局: `flexbox`:提供了一种更灵活的布局方式。 `grid`:用于创建复杂的二维布局。 `columncount` 和 `columngap`:用于创建多列布局。

7. 其他: `boxsizing`:控制元素的盒模型。 `resize`:允许用户调整元素的大小。 `filter`:用于应用图像效果,如模糊、亮度调整等。

这些只是 CSS3 新增属性的一部分,实际上还有许多其他的属性和功能。CSS3 的引入使得网页设计更加丰富和灵活,为开发者提供了更多的创意空间。

CSS3新增属性详解

随着Web技术的发展,CSS3作为CSS2的升级版本,引入了众多新特性和功能,极大地丰富了网页设计和开发的能力。本文将详细介绍CSS3中新增的一些重要属性,帮助开发者更好地理解和应用这些新特性。

一、CSS3文字效果属性

CSS3新增了一系列文字效果属性,使得文本的样式和布局更加灵活。

1. hanging-punctuation

`hanging-punctuation` 属性用于规定标点符号是否位于线框之外。该属性可以取值 `auto` 或 `none`,默认值为 `auto`。

2. punctuation-trim

`punctuation-trim` 属性用于规定是否对标点字符进行修剪。该属性可以取值 `auto` 或 `none`,默认值为 `auto`。

3. text-align-last

`text-align-last` 属性用于设置如何对齐最后一行或紧挨着强制换行符之前的行。该属性可以取值 `auto`、`left`、`right`、`center`、`justify` 等。

4. text-emphasis

`text-emphasis` 属性用于向元素的文本应用重点标记以及重点标记的前景色。该属性可以取值 `none`、``、`` 等。

5. text-justify

`text-justify` 属性规定当 `text-align` 设置为 `justify` 时所使用的对齐方法。该属性可以取值 `auto`、`inter-word`、`kashida`、`ligature` 等。

6. text-outline

`text-outline` 属性用于规定文本的轮廓。该属性可以取值 `none`、``、``、`` 等。

7. text-overflow

`text-overflow` 属性规定当文本溢出包含元素时发生的事情。该属性可以取值 `clip`、`ellipsis`、`string` 等。

8. text-shadow

`text-shadow` 属性用于向文本添加阴影。该属性可以取值 `none`、``、``、`` 等。

9. text-wrap

`text-wrap` 属性用于规定文本的换行规则。该属性可以取值 `normal`、`break-word` 等。

10. word-break

`word-break` 属性规定非中日韩文本的换行规则。该属性可以取值 `normal`、`break-all`、`keep-all` 等。

11. word-wrap

`word-wrap` 属性允许对长的不可分割的单词进行分割并换行到下一行。该属性可以取值 `normal`、`break-word` 等。

二、CSS3边框属性

CSS3新增了一些边框属性,使得边框的样式和布局更加丰富。

1. border-radius

`border-radius` 属性用于设置元素的圆角效果。该属性可以取值 ``、``、`` 等。

2. box-shadow

`box-shadow` 属性用于向方框添加阴影。该属性可以取值 `none`、``、``、`` 等。

3. border-image

`border-image` 属性用于使用图片创建边框。该属性可以取值 `none`、``、``、`` 等。

三、CSS3背景属性

CSS3新增了一些背景属性,使得背景的样式和布局更加灵活。

1. background-size

`background-size` 属性用于设置背景图片的大小。该属性可以取值 `auto`、``、``、`cover`、`contain` 等。

2. background-origin

`background-origin` 属性用于设置背景图片的定位区域。该属性可以取值 `padding-box`、`border-box`、`content-box` 等。

3. background-clip

`background-clip` 属性用于设置背景图片的裁剪区域。该属性可以取值 `border-box`、`padding-box`、`content-box` 等。

四、CSS3变换属性

CSS3新增了一些变换属性,使得元素可以更加