当前位置：凯发k8官方网 > 前端技术 > css >内容正文

css

【css3】background-凯发k8官方网

发布时间：2025/7/25 css 38 豆豆

凯发k8官方网收集整理的这篇文章主要介绍了【css3】background-origin和background-clip的区别小编觉得挺不错的,现在分享给大家,帮大家做个参考.

　　background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性，它们有相同的可选值，即border、padding、content三种，而且这两个属性表示的都是元素背景与元素边框、补白(padding)和内容区域之间的某种关系。

　　虽然两者看上去实现的效果差不多，但是他们两个的原理是不同的。background-origin定义的是背景位置（background-position）的起始点；而background-clip是对背景（图片和背景色）的切割。

1.background-origin

　　我们来看一下例子：

　　我们来看一下style样式：

.bg{width: 100px;height: 100px;padding:50px;border: 10px dashed #000000;background: #ffff00 no-repeat;margin-top: 10px;display: inline-block;}.bg_origin_border{background-origin: border-box;/*background-position: 10px 10px;*/}.bg_origin_padding{background-origin: padding-box;/*background-position: 10px 10px;*/}.bg_origin_content{background-origin: content-box;/*background-position: 10px 10px;*/}

　　下面我们把注释打开，来进一步验证backgroung-origin。

2.backgroung-clip

　　我们还是直接来看例子：

　　样式：

.bg_clip_border{background-clip: border-box;/*background-position: -10px -10px;*/}.bg_clip_content{background-clip: content-box;/*background-position: -10px -10px;*/}.bg_clip_padding{background-clip: padding-box;/*background-position: -10px -10px;*/}

　　我们接着把注释去掉：

　　这就印证了background-clip只是将背景和背景色粗暴的裁剪。

转载于:https://www.cnblogs.com/shytong/p/5077129.html

总结

以上是凯发k8官方网为你收集整理的【css3】background-origin和background-clip的区别的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。