css3常用属性大全（css属性及含义）

## CSS3 常用属性大全### 简介CSS3 是层叠样式表（Cascading Style Sheets）语言的最新版本，它为网页设计带来了许多强大的新特性和功能。本文将为您介绍一些常用的 CSS3 属性，并提供详细说明和示例，帮助您更好地掌握 CSS3。### 一、选择器CSS3 引入了一些新的选择器，使开发者能够更方便地选择和操作页面元素。

属性选择器:

`[attribute]`：选择拥有指定属性的所有元素。

`[attribute="value"]`：选择属性值等于指定值的元素。

`[attribute^="value"]`：选择属性值以指定值开头的元素。

`[attribute$="value"]`：选择属性值以指定值结尾的元素。

`[attribute

="value"]`：选择属性值包含指定值的元素。

伪类选择器:

`:nth-child(n)`：选择父元素下的第 n 个子元素。

`:nth-of-type(n)`：选择父元素下指定类型的第 n 个子元素。

`:not(selector)`：选择不匹配指定选择器的元素。

`:empty`：选择没有子元素的元素。

`:target`：选择当前活动链接指向的元素。

伪元素选择器:

`::before`：在元素内容之前插入内容。

`::after`：在元素内容之后插入内容。

`::first-letter`：选择元素的第一个字母。

`::first-line`：选择元素的第一行。### 二、背景与边框CSS3 扩展了背景和边框属性，提供了更丰富的样式选项。

`background-size`:

设置背景图片的大小。

`cover`：缩放图片以覆盖整个容器。

`contain`：缩放图片以适应容器，同时保持图片的宽高比。

`background-origin`:

指定背景图片的定位区域。

`padding-box`：背景图片从内边距开始。

`border-box`：背景图片从边框开始。

`content-box`：背景图片从内容区域开始。

`border-radius`:

设置圆角边框。

`box-shadow`:

为元素添加阴影效果。

`background-clip`:

指定背景的绘制区域。

`border-box`：背景绘制到边框区域。

`padding-box`：背景绘制到内边距区域。

`content-box`：背景绘制到内容区域。

`linear-gradient()`:

创建线性渐变背景。

`radial-gradient()`:

创建径向渐变背景。### 三、文本效果CSS3 提供了一些新的文本属性，可以用来创建更丰富的排版效果。

`text-shadow`:

为文本添加阴影效果。

`word-wrap`:

设置单词是否断行。

`text-overflow`:

指定当文本溢出容器时如何显示。

`ellipsis`：用省略号 (...) 替换溢出的文本。

`clip`：直接截断溢出的文本。

`word-break`:

设置如何断行。

`break-all`：允许在任意字符处断行。

`keep-all`：不允许 CJK 字符断行。

`text-align-last`:

设置最后一行文本的对齐方式。### 四、变形与动画

`transform`:

对元素进行二维或三维变换。

`translate(x,y)`：移动元素。

`rotate(angle)`：旋转元素。

`scale(x,y)`：缩放元素。

`skew(x-angle,y-angle)`：倾斜元素。

`transition`:

创建过渡效果，使元素属性的变化更加平滑。

`animation`:

创建动画效果。### 五、其他常用属性

`box-sizing`:

设置盒模型的计算方式。

`content-box`：标准盒模型。

`border-box`：IE 盒模型，宽度和高度包含内边距和边框。

`opacity`:

设置元素的透明度。

`resize`:

设置元素是否可调整大小。

`outline`:

设置元素的轮廓样式。

`@font-face`:

加载自定义字体。

`@media`:

根据不同的设备和屏幕尺寸应用不同的样式规则（响应式设计）。### 总结本文介绍了部分常用的 CSS3 属性，希望能够帮助您更好地理解和应用 CSS3。随着 Web 技术的不断发展，CSS 也在不断地更新迭代，建议您关注最新的 CSS 规范和技术趋势。

CSS3 常用属性大全

简介CSS3 是层叠样式表（Cascading Style Sheets）语言的最新版本，它为网页设计带来了许多强大的新特性和功能。本文将为您介绍一些常用的 CSS3 属性，并提供详细说明和示例，帮助您更好地掌握 CSS3。

一、选择器CSS3 引入了一些新的选择器，使开发者能够更方便地选择和操作页面元素。* **属性选择器:*** `[attribute]`：选择拥有指定属性的所有元素。* `[attribute="value"]`：选择属性值等于指定值的元素。* `[attribute^="value"]`：选择属性值以指定值开头的元素。* `[attribute$="value"]`：选择属性值以指定值结尾的元素。* `[attribute*="value"]`：选择属性值包含指定值的元素。 * **伪类选择器:*** `:nth-child(n)`：选择父元素下的第 n 个子元素。* `:nth-of-type(n)`：选择父元素下指定类型的第 n 个子元素。* `:not(selector)`：选择不匹配指定选择器的元素。* `:empty`：选择没有子元素的元素。* `:target`：选择当前活动链接指向的元素。 * **伪元素选择器:*** `::before`：在元素内容之前插入内容。* `::after`：在元素内容之后插入内容。* `::first-letter`：选择元素的第一个字母。* `::first-line`：选择元素的第一行。

二、背景与边框CSS3 扩展了背景和边框属性，提供了更丰富的样式选项。* **`background-size`:** 设置背景图片的大小。* `cover`：缩放图片以覆盖整个容器。* `contain`：缩放图片以适应容器，同时保持图片的宽高比。 * **`background-origin`:** 指定背景图片的定位区域。* `padding-box`：背景图片从内边距开始。* `border-box`：背景图片从边框开始。* `content-box`：背景图片从内容区域开始。 * **`border-radius`:** 设置圆角边框。 * **`box-shadow`:** 为元素添加阴影效果。 * **`background-clip`:** 指定背景的绘制区域。* `border-box`：背景绘制到边框区域。* `padding-box`：背景绘制到内边距区域。* `content-box`：背景绘制到内容区域。 * **`linear-gradient()`:** 创建线性渐变背景。 * **`radial-gradient()`:** 创建径向渐变背景。

三、文本效果CSS3 提供了一些新的文本属性，可以用来创建更丰富的排版效果。* **`text-shadow`:** 为文本添加阴影效果。 * **`word-wrap`:** 设置单词是否断行。 * **`text-overflow`:** 指定当文本溢出容器时如何显示。* `ellipsis`：用省略号 (...) 替换溢出的文本。* `clip`：直接截断溢出的文本。 * **`word-break`:** 设置如何断行。* `break-all`：允许在任意字符处断行。* `keep-all`：不允许 CJK 字符断行。 * **`text-align-last`:** 设置最后一行文本的对齐方式。

四、变形与动画* **`transform`:** 对元素进行二维或三维变换。* `translate(x,y)`：移动元素。* `rotate(angle)`：旋转元素。* `scale(x,y)`：缩放元素。* `skew(x-angle,y-angle)`：倾斜元素。 * **`transition`:** 创建过渡效果，使元素属性的变化更加平滑。 * **`animation`:** 创建动画效果。

五、其他常用属性* **`box-sizing`:** 设置盒模型的计算方式。* `content-box`：标准盒模型。* `border-box`：IE 盒模型，宽度和高度包含内边距和边框。 * **`opacity`:** 设置元素的透明度。 * **`resize`:** 设置元素是否可调整大小。 * **`outline`:** 设置元素的轮廓样式。 * **`@font-face`:** 加载自定义字体。 * **`@media`:** 根据不同的设备和屏幕尺寸应用不同的样式规则（响应式设计）。

总结本文介绍了部分常用的 CSS3 属性，希望能够帮助您更好地理解和应用 CSS3。随着 Web 技术的不断发展，CSS 也在不断地更新迭代，建议您关注最新的 CSS 规范和技术趋势。