当前位置：首页 > news >正文

CSS3 常用功能详细使用指南

news 来源：原创 2025/6/10 5:24:09

选择器增强
属性选择器
css
/* 以"btn-"开头的属性 */
[class^=“btn-”] {
background: #3498db;
}

/* 以"-primary"结尾的类 */
[class$=“-primary”] {
color: white;
}

/* 包含"active"的类 /
[class=“active”] {
font-weight: bold;
}
效果：精确选择具有特定属性模式的元素

结构伪类选择器
css
/* 第3个子元素 */
li:nth-child(3) {
color: red;
}

/* 奇数行 */
tr:nth-child(odd) {
background: #f2f2f2;
}

/* 倒数第2个子元素 */
div:nth-last-child(2) {
border-bottom: 1px solid #ddd;
}

/* 不是.first类的元素 */
div:not(.first) {
opacity: 0.8;
}
效果：基于元素位置或特征进行精确样式控制

边框与背景
圆角边框
css
.box {
border-radius: 10px; /* 统一圆角 /
border-radius: 5px 10px 15px 20px; / 分别设置四个角 /
border-radius: 50%; / 圆形 */
}
效果：创建圆角或完全圆形元素

盒子阴影
css
.card {
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
/* 水平偏移垂直偏移模糊半径颜色 */

/* 内阴影 */
box-shadow: inset 0 0 10px #000;

/* 多重阴影 */
box-shadow: 0 0 5px #999, 0 0 10px #777;
}
效果：添加深度感和立体效果

多重背景
css
.hero {
background:
url(‘top-image.png’) top left no-repeat,
url(‘bottom-image.png’) bottom right no-repeat,
linear-gradient(to bottom, #1e5799, #2989d8);
background-size: 200px, 300px, cover;
}
效果：在一个元素上叠加多个背景图像和渐变

渐变效果
线性渐变
css
.gradient-bg {
background: linear-gradient(to right, #ff9966, #ff5e62);

/* 多色渐变 */
background: linear-gradient(to bottom, red, yellow, green);

/* 角度渐变 */
background: linear-gradient(45deg, #3a7bd5, #00d2ff);
}
径向渐变
css
.circle {
background: radial-gradient(circle, #f5f7fa, #c3cfe2);

/* 椭圆形渐变 */
background: radial-gradient(ellipse at center, #a1c4fd, #c2e9fb);
}
效果：创建平滑的颜色过渡，替代图片背景

过渡效果
css
.button {
background: #3498db;
transition: all 0.3s ease;

/* 分开指定属性 */
transition:
background 0.3s ease,
transform 0.2s ease-out;
}

.button:hover {
background: #2980b9;
transform: scale(1.05);
}
效果：鼠标悬停时平滑过渡到新状态

动画效果
css
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}

.ball {
animation: bounce 1s infinite;

/* 分开指定属性 */
animation-name: bounce;
animation-duration: 1s;
animation-timing-function: ease;
animation-iteration-count: infinite;
animation-delay: 0.5s;
animation-direction: alternate;
}
效果：创建复杂的动画序列

2D/3D 转换
2D 转换
css
.transform-box {
transform: translate(50px, 100px); /* 移动 /
transform: rotate(30deg); / 旋转 /
transform: scale(1.5); / 缩放 /
transform: skew(20deg, 10deg); / 倾斜 */

/* 组合变换 /
transform: translateX(50px) rotate(45deg) scale(1.2);
}
3D 转换
css
.container {
perspective: 1000px; / 3D透视 */
}

.card {
transform-style: preserve-3d;
transition: transform 1s;
transform: rotateY(180deg);
}
效果：创建复杂的视觉变换和3D效果

弹性盒子布局 (Flexbox)
css
.container {
display: flex;
flex-direction: row; /* 或 column /
justify-content: center; / 主轴对齐 /
align-items: center; / 交叉轴对齐 */
flex-wrap: wrap;
}

.item {
flex: 1; /* 弹性项目 /
align-self: flex-start; / 单个项目对齐 /
order: 2; / 显示顺序 */
}
效果：创建灵活的一维布局，轻松实现各种对齐方式

网格布局 (Grid)
css
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px auto 50px;
gap: 10px;

/* 区域布局 */
grid-template-areas:
“header header header”
“sidebar main aside”
“footer footer footer”;
}

.header { grid-area: header; }
.main { grid-area: main; }
效果：创建复杂的二维布局系统

响应式设计 (媒体查询)
css
/* 默认样式 */
.container {
width: 100%;
}

/* 平板设备 */
@media (min-width: 768px) {
.container {
width: 750px;
}
}

/* 桌面设备 */
@media (min-width: 992px) {
.container {
width: 970px;
}
}

/* 大屏幕 */
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
效果：根据不同屏幕尺寸应用不同样式

CSS 变量
css
:root {
–primary-color: #3498db;
–secondary-color: #2980b9;
–spacing: 16px;
}

.element {
color: var(–primary-color);
margin: var(–spacing);

/* 默认值 */
padding: var(–spacing, 10px);
}
效果：集中管理样式值，便于主题切换和维护

滤镜效果
css
.image {
filter: blur(2px); /* 模糊 /
filter: brightness(150%); / 亮度 /
filter: contrast(200%); / 对比度 /
filter: grayscale(80%); / 灰度 /
filter: sepia(100%); / 褐色 /
filter: hue-rotate(90deg); / 色相旋转 */