手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >CSS3中background-clip和background-origin的区别示例介绍
CSS3中background-clip和background-origin的区别示例介绍
摘要:相信除了我以外,还有不少童鞋在学习到background-clip和background-origin的时候都很疑惑,这俩哥们儿到底啥区别。...

相信除了我以外,还有不少童鞋在学习到background-clip和background-origin的时候都很疑惑,这俩哥们儿到底啥区别。

想搞清楚它们的区别还不简单?且看下面的DEMO:

.test {

background-image: url(pic.jpg);

background-clip: border-box;

background-origin: border-box;

border: 20px dashed black;

}

.test {

background-image: url(pic.jpg);

background-clip: border-box;

background-origin: padding-box;

border: 20px dashed black;

}

.test {

background-image: url(pic.jpg);

background-clip: padding-box;

background-origin: border-box;

border: 20px dashed black;

}

由于鄙人比较懒,就不放效果图了,有兴趣的童鞋可以自己去试试,这里可以看出,实际上background-clip决定的是背景从哪个区域开始显示,而background-origin决定的是背景从哪个区域开始绘制。

【CSS3中background-clip和background-origin的区别示例介绍】相关文章:

css sprite原理优缺点及使用示例介绍

CSS写的简单表格示例

div中class与id的区别及应用

CSS样式:background-position的理解

CSS中id和class的区别和用法

CSS中Font的一些基本知识点归纳总结

CSS中em和px的区别

CSS background属性(背景属性)详解

Div与table的区别在速度和加载与网页应用等等中的差别介绍

CSS网页布局ID和Class类的命名介绍

精品推荐
分类导航