CSS3是CSS技术的升级版本，在CSS2的基础上新增了大量实用的属性样式，让前端开发者可以更高效地实现丰富的页面视觉效果和交互功能，不需要额外依赖JavaScript就能完成很多复杂的样式需求。这些新特性覆盖了边框、背景、文本、布局、动画等多个开发场景，大幅提升了前端开发的效率和页面的表现力。
一、边框相关新增属性
1. 圆角边框 border-radius
border-radius属性可以轻松设置元素的圆角效果，替代了之前需要用图片实现圆角的繁琐方式，支持设置四个角不同的圆角数值，也可以统一设置所有角的圆角。
/* 统一设置四个角圆角为10px */
.box1 {
width: 200px;
height: 100px;
background-color: #f0f0f0;
border-radius: 10px;
}
/* 分别设置四个角的圆角，顺序为左上、右上、右下、左下 */
.box2 {
width: 200px;
height: 100px;
background-color: #e0e0e0;
border-radius: 10px 20px 30px 40px;
}
/* 设置圆形元素，宽高相等时圆角为宽高的一半 */
.circle {
width: 100px;
height: 100px;
background-color: #409eff;
border-radius: 50%;
}
2. 边框阴影 box-shadow
box-shadow属性可以为元素添加阴影效果，支持设置阴影的水平偏移、垂直偏移、模糊半径、扩散半径和阴影颜色，还可以设置内阴影效果。
/* 基础外阴影：水平偏移5px，垂直偏移5px，模糊半径10px，阴影颜色为黑色半透明 */
.shadow-out {
width: 200px;
height: 100px;
background-color: #fff;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}
/* 内阴影，添加inset关键字 */
.shadow-in {
width: 200px;
height: 100px;
background-color: #fff;
box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.2);
}
3. 边框图片 border-image
border-image属性允许使用图片来作为元素的边框，替代了之前只能用纯色边框的限制，支持设置图片的切片、宽度和重复方式。
/* 使用图片作为边框，图片路径为border.png，切片上右下左各30px，边框宽度10px，重复平铺 */
.border-img {
width: 200px;
height: 100px;
border: 10px solid transparent;
border-image: url(border.png) 30 30 30 30 repeat;
}
二、背景相关新增属性
1. 渐变背景
CSS3新增了渐变背景功能，不需要使用图片就能实现线性渐变和径向渐变效果，包括线性渐变linear-gradient和径向渐变radial-gradient。
/* 线性渐变：从上到下，从蓝色渐变到绿色 */
.linear-gradient {
width: 200px;
height: 100px;
background: linear-gradient(#409eff, #67c23a);
}
/* 线性渐变：从左到右，45度方向，从红色到黄色到绿色 */
.linear-gradient2 {
width: 200px;
height: 100px;
background: linear-gradient(45deg, #f56c6c, #e6a23c, #67c23a);
}
/* 径向渐变：从中心向外，从白色渐变到紫色 */
.radial-gradient {
width: 200px;
height: 100px;
background: radial-gradient(#fff, #9c27b0);
}
2. 多背景 background
CSS3支持为一个元素设置多个背景图片，多个背景之间用逗号分隔，先设置的背景会覆盖在后设置的背景之上。
/* 设置两个背景，第一个是前景小图标，第二个是底层大背景 */
.multi-bg {
width: 300px;
height: 200px;
background: url(icon.png) no-repeat top left, url(bg.png) no-repeat center/cover;
}
3. 背景尺寸 background-size
background-size属性可以设置背景图片的尺寸，支持设置具体的像素值、百分比，也可以使用cover和contain关键字。
/* 背景图片铺满元素，可能裁剪图片 */
.bg-cover {
width: 300px;
height: 200px;
background: url(bg.png) no-repeat center;
background-size: cover;
}
/* 背景图片完整显示在元素内，可能有留白 */
.bg-contain {
width: 300px;
height: 200px;
background: url(bg.png) no-repeat center;
background-size: contain;
}
三、文本相关新增属性
1. 文本阴影 text-shadow
text-shadow属性可以为文本添加阴影效果，参数和box-shadow类似，支持设置水平偏移、垂直偏移、模糊半径和阴影颜色。
/* 文本添加黑色半透明阴影，水平偏移2px，垂直偏移2px，模糊半径4px */
.text-shadow {
font-size: 24px;
color: #333;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
2. 文本溢出处理 text-overflow
text-overflow属性可以设置文本溢出元素时的处理方式，常配合white-space和overflow属性实现单行文本溢出显示省略号的效果。
/* 单行文本溢出显示省略号 */
.single-line-ellipsis {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 多行文本溢出显示省略号，webkit内核浏览器支持 */
.multi-line-ellipsis {
width: 200px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
}
3. 自定义字体 @font-face
@font-face规则允许网页加载自定义字体，不需要用户本地安装对应字体，解决了不同设备字体显示不一致的问题。
/* 定义自定义字体 */
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* 使用自定义字体 */
.custom-font {
font-family: 'MyFont', sans-serif;
font-size: 20px;
}
四、布局相关新增属性
1. 弹性布局 flex
flex布局是CSS3新增的一维布局模型，通过为父元素设置display: flex，可以轻松实现子元素的水平垂直居中、等分布局、自适应布局等效果，是目前最常用的布局方式之一。
/* 父元素设置为flex布局，子元素水平垂直居中 */
.flex-container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
width: 400px;
height: 200px;
background-color: #f0f0f0;
}
.flex-item {
width: 80px;
height: 80px;
background-color: #409eff;
color: #fff;
text-align: center;
line-height: 80px;
}
/* 子元素等分布局 */
.flex-equal {
display: flex;
}
.flex-equal .item {
flex: 1; /* 每个子元素平分父元素宽度 */
height: 100px;
background-color: #67c23a;
margin: 0 5px;
}
2. 网格布局 grid
grid布局是CSS3新增的二维布局模型，可以同时处理行和列的布局，适合实现复杂的页面整体布局，比如多栏布局、卡片网格布局等。
/* 定义3列2行的网格布局，列宽各1fr，行高各100px */
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
gap: 10px; /* 网格间隙 */
width: 400px;
}
.grid-item {
background-color: #e6a23c;
color: #fff;
text-align: center;
line-height: 100px;
}
3. 盒模型 box-sizing
box-sizing属性可以修改元素的盒模型计算方式，默认值是content-box，新增的border-box值可以让元素的宽度和高度包含内边距和边框，避免布局计算出错。
/* 默认盒模型，宽度200px仅包含内容区，加上padding和border后总宽度会超过200px */
.box-content {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #333;
box-sizing: content-box;
}
/* border-box盒模型，宽度200px包含内容区、padding和border，总宽度固定为200px */
.box-border {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #333;
box-sizing: border-box;
}
五、动画相关新增属性
1. 过渡动画 transition
transition属性可以实现元素样式变化的平滑过渡效果，不需要使用JavaScript就能完成简单的交互动画，支持设置过渡的属性、持续时间、过渡速度和延迟时间。
/* 鼠标悬停时宽度从100px过渡到200px，持续时间0.3秒，匀速过渡 */
.transition-demo {
width: 100px;
height: 100px;
background-color: #f56c6c;
transition: width 0.3s ease-in-out;
}
.transition-demo:hover {
width: 200px;
}
/* 同时过渡多个属性，用逗号分隔 */
.transition-multi {
width: 100px;
height: 100px;
background-color: #9c27b0;
transition: width 0.3s, background-color 0.3s;
}
.transition-multi:hover {
width: 200px;
background-color: #673ab7;
}
2. 关键帧动画 animation
animation属性结合@keyframes规则可以实现更复杂的关键帧动画，支持设置动画名称、持续时间、播放次数、播放方向等参数，能实现循环播放、交替播放等效果。
/* 定义关键帧动画，从左侧移动到右侧 */
@keyframes move {
from {
transform: translateX(0);
}
to {
transform: translateX(300px);
}
}
/* 应用动画，持续2秒，匀速播放，无限循环 */
.animation-demo {
width: 100px;
height: 100px;
background-color: #409eff;
animation: move 2s linear infinite;
}
/* 复杂关键帧，多个节点 */
@keyframes color-change {
0% {
background-color: #f56c6c;
}
50% {
background-color: #e6a23c;
}
100% {
background-color: #67c23a;
}
}
.animation-color {
width: 100px;
height: 100px;
animation: color-change 3s ease infinite;
}
3. 变换 transform
transform属性可以对元素进行旋转、缩放、倾斜、平移等变换操作，常和过渡、动画属性配合使用，实现丰富的动态效果。
/* 旋转45度 */
.rotate {
width: 100px;
height: 100px;
background-color: #409eff;
transform: rotate(45deg);
}
/* 缩放为原来的1.5倍 */
.scale {
width: 100px;
height: 100px;
background-color: #67c23a;
transform: scale(1.5);
}
/* 平移，水平移动50px，垂直移动30px */
.translate {
width: 100px;
height: 100px;
background-color: #e6a23c;
transform: translate(50px, 30px);
}
/* 倾斜，水平倾斜20度 */
.skew {
width: 100px;
height: 100px;
background-color: #f56c6c;
transform: skew(20deg);
}
六、其他常用新增特性
1. 媒体查询 @media
@media规则是响应式布局的核心，可以根据不同的设备屏幕尺寸、分辨率等条件应用不同的样式，实现一套代码适配多端设备。
/* 屏幕宽度小于768px时，应用以下样式 */
@media screen and (max-width: 768px) {
.container {
width: 100%;
padding: 0 10px;
}
.box {
height: 80px;
}
}
/* 屏幕宽度在768px到1200px之间时，应用以下样式 */
@media screen and (min-width: 768px) and (max-width: 1200px) {
.container {
width: 750px;
margin: 0 auto;
}
}
2. 滤镜 filter
filter属性可以为元素添加滤镜效果，比如模糊、灰度、饱和度调整等，常用来处理图片和背景的视觉效果。
/* 图片模糊5px */
.blur-img {
width: 200px;
filter: blur(5px);
}
/* 图片灰度100% */
.gray-img {
width: 200px;
filter: grayscale(100%);
}
/* 调整图片饱和度到200% */
.saturate-img {
width: 200px;
filter: saturate(200%);
}
3. 变量 var()
CSS3支持自定义属性（CSS变量），通过--开头定义变量，使用var()函数调用变量，方便统一管理样式中的重复值，提升样式的可维护性。
/* 定义全局CSS变量 */
:root {
--primary-color: #409eff;
--font-size-base: 14px;
--spacing-base: 10px;
}
/* 使用CSS变量 */
.btn {
background-color: var(--primary-color);
font-size: var(--font-size-base);
padding: var(--spacing-base);
color: #fff;
border: none;
border-radius: 4px;
}
.card {
border: 1px solid var(--primary-color);
padding: calc(var(--spacing-base) * 2);
font-size: var(--font-size-base);
}
以上就是CSS3中常用的新增属性样式和新特性，这些特性已经得到了现代浏览器的广泛支持，可以在实际项目中放心使用。合理运用这些新特性，可以大幅减少开发工作量，提升页面的视觉效果和用户体验。