css的background-clip的border-box,padding-box,content-box
阿新 • • 發佈：2020-07-19
background-clip有三個屬性預設值為border-box
padding-box:將圖片裁剪到內邊距盒子以內
content-box:將圖片位於內邊距及其之外的部分裁剪掉
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; background-position: center; border: 10px solid rgba(220,220,160,.5); background-image: url(./img/cat.jpg); padding: 20px; float: left; } .a1{ background-clip: border-box; }.a2{ background-clip: padding-box; } .a3{ background-clip: content-box; } footer{ clear:left; } footer > span:nth-of-type(1){ margin-left: 80px; }footer > span:nth-of-type(2){ color: red; margin-left: 180px; } footer > span:nth-of-type(3){ margin-left: 150px; } </style> </head> <body> <div class="a1"></div> <div class="a2"></div> <div class="a3"></div> <footer> <span>border-box</span> <span>padding-box</span> <span>content-box</span> </footer> </body> </html>