码迷,mamicode.com
首页 > 其他好文 > 详细

background-origin,clip

时间:2018-12-27 03:32:08      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:ack   add   区域   idt   ges   round   ref   style   splay   

 <style>
*{
padding: 0;
margin: 0;
}
/*提升移动端响应区域的大小*/
a{
width: 50px;
height: 50px;
display: block;
background-color: #ddd;
margin:100px auto;
box-sizing: border-box;

background-image: url("images/img/sprites.png");
/*设置背景偏移,参照background-origin原点,这个原点默认在容器的左上角*/
background-position: -20px 0;

/*添加padding*/
padding:14px;

/*设置背景坐标的原点
border-box:从border的位置开始填充背景,会与border重叠
padding-box:从padding的位置开始填充背景,会与padding重叠
content-box:从内容的位置开始填充背景*/
background-origin: content-box;

/*设置内容的裁切:设置的是裁切,控制的是显示
border-box:其实是显示border及以内的内容
padding-box:其实是显示padding及以内的内容
content-box:其实是显示content及以内的内容*/
background-clip: content-box;
}
</style>
</head>
<body>
<a href="#"></a>

background-origin,clip

标签:ack   add   区域   idt   ges   round   ref   style   splay   

原文地址:https://www.cnblogs.com/lujieting/p/10182581.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!