- 选择器增强
属性选择器
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); / 色相旋转 */
/* 组合滤镜 */
filter: brightness(1.2) contrast(0.8) saturate(1.5);
}
效果：实时图像处理，无需编辑原图
- 裁剪与形状
css
.circle {
clip-path: circle(50% at 50% 50%);
}
.polygon {
clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
}
.text-wrap {
shape-outside: circle(50%);
float: left;
width: 200px;
height: 200px;
}
效果：创建非矩形元素和文字环绕效果