English
深入浅出CSS3 background-clip,background-origin和border-image教程
文件大小：
460k
资源说明：已兼容IE！之前不能兼容IE，给您的阅读带来不便十分抱歉，Sorry
一．这篇博客的初衷
最近在准备一个下学期参加比赛的概念网站，希望能用到CSS3的新特性，比如background的background-clip或background-origin或border-image。但仅仅是依靠w3schools上的文档和说明发现很多臆想中的效果都实现不了。于是尝试在百度中搜素，结果资料也是少的可怜，反复转载的只有一篇来自怿飞博客的《 background-clip与background-origin 的一则运用》
,但毕竟是几年前的文章，其中的部分内容已经不适用于现在的标准了，其他的搜索结果也
【CSS3背景属性详解】
CSS3为网页设计带来了丰富的背景属性，其中`background-clip`、`background-origin`和`border-image`是三个非常重要的增强，它们极大地扩展了背景图像的使用方式，允许开发者创建更加复杂和精细的视觉效果。
1. **background-clip**
`background-clip`属性控制背景图像的绘制区域。默认情况下，背景图像会填充到元素的边框盒内。但通过`background-clip`，我们可以选择让背景仅在内容区域显示，或者延伸到内边距甚至边框。例如：
- `background-clip: content-box`：背景仅限于内容区域，不包括内边距和边框。
- `background-clip: padding-box`：背景填充到内边距盒，不包括边框。
- `background-clip: border-box`：背景延伸到边框盒，这是默认值。
2. **background-origin**
`background-origin`属性定义了背景图像的定位原点。默认情况下，背景图像的左上角从内容区域的左上角开始定位。但是，通过改变`background-origin`，我们可以让图像从内边距盒或边框盒的左上角开始：
- `background-origin: content-box`：背景图像定位从内容区域开始。
- `background-origin: padding-box`：背景图像定位从内边距区域开始。
- `background-origin: border-box`：背景图像定位从边框区域开始。
3. **border-image**
`border-image`属性允许我们将图像用作边框，而不是传统的单色或渐变边框。它结合了边框宽度、边框样式和边框图像，可以创建出极具创意的边框效果。语法通常包括源图像URL、边框图像的分割方式以及边框宽度等。例如：
- `border-image-source: url(image.png)`：指定边框图像的URL。
- `border-image-slice: 10% fill`：切分图像，fill表示保留图像中心部分。
- `border-image-width: auto`：设置边框宽度，auto表示使用边框宽度。
在CSS3之前，创建复杂的背景效果通常需要使用多个图像和精确的定位，例如文中提到的通过多图像背景技术来实现圆角或阴影。而现在，这些新属性使得开发者能够更轻松地实现动态伸缩的背景、自定义边框阴影等效果，减少了对图像编辑软件的依赖，提高了效率和灵活性。
在实际应用中，`background-clip`、`background-origin`和`border-image`可以配合使用，以实现各种独特的视觉效果，例如创建带有渐变边框的按钮、自适应长度的背景图像以及模拟3D效果的阴影。这些属性在现代浏览器中已有良好支持，包括IE9及更高版本，大大拓宽了Web设计师的创作空间。
请注意，尽管这些属性在某些情况下可以替代传统的多图像背景技术，但在考虑兼容性问题时，仍需谨慎使用，并为旧版浏览器提供备选方案。同时，合理运用这些属性可以提升用户体验，但避免过度设计，保持网页加载速度和性能。
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
