CSS3新增属性有哪些？CSS3中常用的新增属性全面总结

CSS3是CSS技术发展历程中的一个重要版本，它为网页设计与前端开发带来了大量强大且实用的新特性。与之前的CSS2.1版本相比，CSS3新增的属性种类丰富，功能强大，极大地提升了网页的表现力，同时也减少了对图片和JavaScript脚本的依赖。本文将对CSS3中常用且重要的新增属性进行系统的梳理和总结，帮助开发者更加全面地掌握这些特性，从而在实际项目中灵活运用。

一、边框与圆角相关属性

CSS3在边框方面引入了多个实用的新属性，这些属性让盒子的外观更加灵活多样，不再局限于传统的直角边框与纯色边框。

1. border-radius（圆角属性）

<border-radius> 属性用于设置元素外边框的圆角效果。该属性可以接受一到四个值，分别控制四个角的圆角半径。如果提供四个值，则依次对应左上角、右上角、右下角和左下角。如果提供两个值，则第一个值作用于左上角和右下角，第二个值作用于右上角和左下角。通过使用百分比值，还可以实现椭圆形圆角效果。

/* 四个角统一设置为10px圆角 */
.box {
    border-radius: 10px;
}

/* 分别设置四个角：左上 右上 右下 左下 */
.box2 {
    border-radius: 10px 20px 30px 40px;
}

/* 椭圆形圆角：水平半径与垂直半径不同 */
.box3 {
    border-radius: 50% / 20%;
}

/* 只设置左上角圆角 */
.box4 {
    border-top-left-radius: 15px;
}

2. box-shadow（盒阴影属性）

<box-shadow> 属性允许为一个元素添加一个或多个阴影效果。其基本语法包含水平偏移量、垂直偏移量、模糊半径、扩散半径和阴影颜色等参数。通过添加 <inset> 关键字，可以将阴影设置为内阴影效果。开发者还可以同时指定多个阴影，彼此之间用逗号分隔，从而实现丰富的层次感。

/* 基本外阴影：水平偏移 垂直偏移 模糊半径 颜色 */
.card {
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}

/* 内阴影效果：使用inset关键字 */
.card-inset {
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
}

/* 多重阴影：多个阴影用逗号分隔 */
.card-multi {
    box-shadow: 2px 2px 5px gray, -2px -2px 5px blue;
}

/* 带扩散半径的阴影：第四个数值为扩散半径 */
.card-spread {
    box-shadow: 0 0 10px 5px rgba(0, 0, 255, 0.3);
}

3. border-image（边框图像属性）

<border-image> 属性允许开发者使用图像来作为元素的边框，取代传统的纯色边框。该属性是一个简写属性，可以同时设置边框图像的来源、切片宽度、宽度、重复方式等参数。使用边框图像时，通常需要配合 <border> 属性一起使用，并且将 <border< 设置为透明或与图像风格匹配的颜色。

.border-img {
    border: 15px solid transparent;
    border-image: url('border.png') 30 stretch;
}

/* 边框图像重复方式为round（平铺） */
.border-img-round {
    border: 20px solid transparent;
    border-image: url('border.png') 30 round;
}

/* 边框图像重复方式为repeat（重复） */
.border-img-repeat {
    border: 20px solid transparent;
    border-image: url('border.png') 30 repeat;
}

二、背景相关新增属性

CSS3对背景属性进行了显著的增强，新增了多个控制背景图像显示方式与定位区域的属性，让背景处理更加灵活和精细。

1. background-size（背景尺寸属性）

<background-size> 属性用于控制背景图像的尺寸。它可以设置为具体的宽度和高度值，也可以使用百分比，还可以使用关键字 <cover> 或 <contain>。<cover> 会缩放图像以完全覆盖容器，可能导致图像部分被裁剪；<contain> 则会缩放图像以完整显示在容器内，可能留有空白区域。

/* 覆盖整个容器，可能裁剪图片 */
.bg-cover {
    background-size: cover;
}

/* 完整显示图片，可能留有空白 */
.bg-contain {
    background-size: contain;
}

/* 自定义尺寸：宽度200px，高度100px */
.bg-custom {
    background-size: 200px 100px;
}

/* 百分比尺寸：宽度50%，高度自动 */
.bg-percent {
    background-size: 50% auto;
}

2. background-origin（背景定位区域属性）

<background-origin> 属性用于指定背景图像的定位起始区域。该属性接受三个可选值：<padding-box>（默认值，从内边距区域开始定位）、<border-box>（从边框区域开始定位）和 <content-box>（从内容区域开始定位）。

/* 背景从内边距区域开始定位 */
.bg-origin-padding {
    background-origin: padding-box;
}

/* 背景从边框区域开始定位 */
.bg-origin-border {
    background-origin: border-box;
}

/* 背景从内容区域开始定位 */
.bg-origin-content {
    background-origin: content-box;
}

3. background-clip（背景绘制区域属性）

<background-clip> 属性用于定义背景的绘制区域，决定背景是否延伸到边框下方。该属性同样接受 <border-box>、<padding-box> 和 <content-box> 三个值。其中 <border-box> 为默认值，表示背景会延伸到边框区域；<padding-box> 表示背景只延伸到内边距区域；<content-box> 表示背景只绘制在内容区域。

/* 背景延伸到边框区域（默认值） */
.bg-clip-border {
    background-clip: border-box;
}

/* 背景只延伸到内边距区域 */
.bg-clip-padding {
    background-clip: padding-box;
}

/* 背景只绘制在内容区域 */
.bg-clip-content {
    background-clip: content-box;
}

/* 将背景裁剪为文字形状（需要配合透明文字颜色） */
.bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

三、文本与字体相关属性

CSS3在文本呈现方面增加了许多实用的新属性，使得文字的表现力更加丰富，同时也改善了长文本的排版效果。

1. text-shadow（文字阴影属性）

<text-shadow> 属性用于为文字添加阴影效果，其语法与 <box-shadow> 类似，但不支持内阴影效果。该属性可以接受多个阴影值，彼此之间用逗号分隔，从而实现多重阴影效果。合理使用文字阴影可以增强文字的立体感和视觉效果。

/* 基本文字阴影：水平偏移 垂直偏移 模糊半径 颜色 */
.title {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* 多重文字阴影 */
.title-multi {
    text-shadow: 1px 1px 2px red, 0 0 1em blue;
}

/* 模糊文字效果 */
.title-blur {
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
}

/* 浮雕效果 */
.title-emboss {
    text-shadow: 1px 1px 1px white, -1px -1px 1px gray;
}

2. word-wrap与overflow-wrap（单词换行属性）

<word-wrap> 属性用于设置当长单词或URL地址超出容器边界时是否允许换行。在CSS3的后续版本中，<word-wrap> 已被 <overflow-wrap> 所取代，但考虑到浏览器的兼容性，<word-wrap> 仍然被广泛支持。该属性最常用的值是 <break-word>，表示允许在单词内部进行换行，从而防止内容溢出容器。

/* 允许长单词在边界处换行 */
.long-word {
    word-wrap: break-word;
}

/* 使用overflow-wrap属性（CSS3标准属性） */
.long-word-standard {
    overflow-wrap: break-word;
}

/* normal表示只在允许的断点处换行（默认值） */
.long-word-normal {
    word-wrap: normal;
}

3. text-overflow（文本溢出属性）

<text-overflow> 属性用于设置当文本内容溢出容器时的显示方式。该属性通常需要与 <overflow:hidden> 和 <white-space:nowrap> 配合使用，才能达到预期的效果。<text-overflow:ellipsis> 是最常用的取值，它会在文本溢出时显示省略号，提示用户还有更多内容。

/* 单行文本溢出显示省略号 */
.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 文本溢出时直接裁剪 */
.clip {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
}

/* 使用自定义字符串（部分浏览器支持） */
.custom-string {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: "[更多]";
}

4. @font-face（自定义字体规则）

<@font-face> 规则允许开发者引用存储在服务器上的字体文件，使得网页可以使用任意字体，而无需依赖用户本地是否安装了该字体。通过定义 <@font-face>，开发者可以指定字体的名称、来源路径以及字体的粗细和风格等属性。为了兼容不同的浏览器，通常需要提供多种字体格式，如WOFF2、WOFF和TTF等。

@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/custom.woff2') format('woff2'),
         url('fonts/custom.woff') format('woff'),
         url('fonts/custom.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/custom-bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

.custom-font {
    font-family: 'MyCustomFont', sans-serif;
    font-weight: normal;
}

.custom-font-bold {
    font-family: 'MyCustomFont', sans-serif;
    font-weight: bold;
}

四、2D与3D变换属性

CSS3引入了强大的 <transform> 属性，使开发者可以对元素进行平移、旋转、缩放和倾斜等变换操作，并且支持3D空间中的立体变换，极大地丰富了页面的交互效果。

1. transform（变换属性）

<transform> 属性允许开发者对一个元素应用多种变换函数。常用的2D变换函数包括 <translate()>（平移）、<rotate()>（旋转）、<scale()>（缩放）和 <skew()>（倾斜）。对于3D变换，可以使用 <rotateX()>、<rotateY()>、<translate3d()>、<scale3d()> 等函数。多个变换函数可以组合使用，彼此之间用空格分隔。

/* 2D平移：水平移动50px，垂直移动100px */
.move {
    transform: translate(50px, 100px);
}

/* 2D旋转：顺时针旋转45度 */
.rotate {
    transform: rotate(45deg);
}

/* 缩放：放大1.5倍 */
.scale {
    transform: scale(1.5);
}

/* 倾斜：水平倾斜10度，垂直倾斜20度 */
.skew {
    transform: skew(10deg, 20deg);
}

/* 3D旋转：绕X轴旋转45度，绕Y轴旋转30度 */
.rotate3d {
    transform: rotateX(45deg) rotateY(30deg);
}

/* 3D平移：水平50px，垂直100px，深度20px */
.translate3d {
    transform: translate3d(50px, 100px, 20px);
}

/* 组合变换：先旋转再平移 */
.combine {
    transform: rotate(30deg) translate(100px, 0);
}

2. transform-origin（变换原点属性）

<transform-origin> 属性用于设置变换的原点位置，即变换操作的中心点。默认情况下，变换的原点是元素的中心点（50% 50%）。通过修改该属性，可以将变换原点设置为元素的左上角、右下角或者其他任意位置。该属性可以接受关键字（如 <left>、<top>、<right>、<bottom>、<center>）、百分比值或具体的像素值。

/* 设置左上角为变换原点 */
.transform-top-left {
    transform-origin: left top;
}

/* 设置右下角为变换原点 */
.transform-bottom-right {
    transform-origin: right bottom;
}

/* 使用百分比：水平30%，垂直70% */
.transform-custom {
    transform-origin: 30% 70%;
}

/* 使用像素值 */
.transform-pixel {
    transform-origin: 50px 100px;
}

/* 3D变换中设置Z轴原点 */
.transform-3d {
    transform-origin: 50% 50% 20px;
}

CSS3新增属性边框圆角阴影渐变CSS动画Flexbox布局