# CSS3核心特性-第8章-8.1-边框与背景增强 ## 一、学习目标 - 掌握CSS3边框增强属性（`border-radius`、`box-shadow`）的语法与取值 - 理解线性渐变（`linear-gradient`）和径向渐变（`radial-gradient`）的实现原理 - 能够使用背景增强属性（`background-size`、`background-clip`）实现复杂背景效果 ## 二、概念讲解 CSS3对边框和背景进行了显著增强，允许开发者通过纯CSS实现圆角、阴影、渐变等效果，无需依赖图片资源。这些特性不仅提升了视觉表现力，还减少了HTTP请求，优化了页面性能。 ### 核心改进点： - **边框**：引入圆角、多阴影、边框图片等特性 - **背景**：支持渐变背景、多背景图片、背景尺寸控制等 ## 三、语法参考 ### 3.1 边框增强属性 #### 3.1.1 圆角边框（`border-radius`） 用于创建元素的圆角效果，支持单独设置四个角的半径。 | 语法形式 | 描述 | 示例 | |-------------------------|-------------------------------|-------------------------------| | `border-radius: ` | 四个角统一圆角半径 | `border-radius: 10px` | | `border-radius:
` | 左上→右上→右下→左下（顺时针） | `border-radius: 10px 20px 30px 40px` | | `border-radius: /` | 水平半径/垂直半径（椭圆角） | `border-radius: 50%/30%` | #### 3.1.2 盒子阴影（`box-shadow`） 为元素添加一个或多个阴影效果，支持多层阴影叠加。 ```css /* 语法：水平偏移 垂直偏移 模糊半径 扩散半径 颜色 [inset] */ box-shadow: 2px 2px 10px rgba(0,0,0,0.3); /* 外阴影 */ box-shadow: inset 0 0 10px #ff0000; /* 内阴影 */ box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08); /* 多层阴影 */ ``` ### 3.2 背景增强属性 #### 3.2.1 渐变背景（`background-image: gradient()`） - **线性渐变**：沿直线方向的颜色过渡 ```css /* 语法：方向 颜色点1 颜色点2 ... */ background: linear-gradient(to right, #ff6b6b, #4ecdc4); /* 从左到右红→蓝 */ background: linear-gradient(45deg, #fff 0%, #000 100%); /* 45度角白→黑 */ ``` - **径向渐变**：从中心点向外的颜色过渡 ```css /* 语法：形状 大小 位置 颜色点1 颜色点2 ... */ background: radial-gradient(circle at center, #ffeb3b, #f44336); /* 中心圆黄→红 */ background: radial-gradient(ellipse 80% 50% at top, #4CAF50, transparent); /* 顶部椭圆绿→透明 */ ``` #### 3.2.2 背景尺寸与裁剪 - `background-size`：控制背景图片大小 ```css background-size: cover; /* 覆盖容器（可能裁剪） */ background-size: contain; /* 适应容器（可能留白） */ background-size: 200px 150px; /* 固定尺寸 */ ``` - `background-clip`：控制背景绘制区域 ```css background-clip: border-box; /* 默认，包括边框 */ background-clip: padding-box; /* 限于内边距区域 */ background-clip: content-box; /* 限于内容区域 */ background-clip: text; /* 背景裁剪为文本形状（需配合文字透明） */ ``` ## 四、实战示例 ### 示例1：带阴影的圆角按钮 ```html 点击按钮 ``` ### 示例2：文本渐变效果 ```html

CSS3渐变文字

``` ### 示例3：多层背景图片 ```html ``` ## 五、注意事项 1. **兼容性处理**： - `border-radius`：IE9+支持，IE8及以下需使用图片模拟 - `box-shadow`：IE9+支持，早期WebKit内核需添加`-webkit-box-shadow`前缀 - `background-clip: text`：需添加`-webkit-background-clip: text`以兼容Chrome/Safari 2. **性能优化**： - 避免过度使用多层阴影（`box-shadow`），可能导致页面重绘性能下降 - 渐变背景使用`background-attachment: fixed`时需注意移动端性能 3. **常见错误**： - ❌ 为行内元素（如``）添加`box-shadow`无效：需设置`display: inline-block` - ❌ `border-radius`与`overflow: hidden`冲突：部分浏览器下可能裁剪异常，可嵌套一层容器解决 ## 六、自测题 1. 如何实现一个左上和右下为20px圆角，右上和左下为10px圆角的元素？ ```css /* 答案 */ border-radius: 20px 10px 20px 10px; ``` 2. 以下代码的作用是？ ```css background: linear-gradient(90deg, transparent, rgba(0,0,0,0.5)), url("bg.jpg") center/cover; ``` **答案**：创建带黑色渐变遮罩的全屏背景图，渐变从左到右透明→半黑，背景图居中且覆盖容器。 3. 如何实现一个内阴影和外阴影同时存在的元素？ ```css /* 答案 */ box-shadow: 0 4px 6px rgba(0,0,0,0.2), /* 外阴影 */ inset 0 2px 4px rgba(255,255,255,0.5); /* 内阴影 */ ```