- 选择器增强
属性选择器
css
/* 以"btn-"开头的属性 */class\^="btn-"\] { background: #3498db; }
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; } 效果：基于元素位置或特征进行精确样式控制 2. 边框与背景 圆角边框 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; } 效果：在一个元素上叠加多个背景图像和渐变 3. 渐变效果 线性渐变 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); } 效果：创建平滑的颜色过渡，替代图片背景 4. 过渡效果 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); } 效果：鼠标悬停时平滑过渡到新状态 5. 动画效果 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; } 效果：创建复杂的动画序列 6. 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效果 7. 弹性盒子布局 (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; /* 显示顺序 \*/ } 效果：创建灵活的一维布局，轻松实现各种对齐方式 8. 网格布局 (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; } 效果：创建复杂的二维布局系统 9. 响应式设计 (媒体查询) 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; } } 效果：根据不同屏幕尺寸应用不同样式 10. CSS 变量 css :root { --primary-color: #3498db; --secondary-color: #2980b9; --spacing: 16px; } .element { color: var(--primary-color); margin: var(--spacing); /\* 默认值 \*/ padding: var(--spacing, 10px); } 效果：集中管理样式值，便于主题切换和维护 11. 滤镜效果 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); } 效果：实时图像处理，无需编辑原图 12. 裁剪与形状 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; } 效果：创建非矩形元素和文字环绕效果