background-origin,clip
阿新 • • 發佈：2018-12-26
<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>