效果图
源代码如下
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>条纹边框实现谈盒子模型</title> 6 <style> 7 html { 8 font-family: font-family: Tahoma, Arial, Helvetica, "Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑", sans-serif; 9 } 10 div { 11 width: 100px; 12 height: 100px; 13 color: #FFF; 14 padding: 10px; 15 border:dashed 10px rgba(0,0,0,.5); 16 display: inline-block; 17 position: relative; 18 margin: 10px 10px; 19 } 20 .bgColor { 21 background-color: deeppink; 22 } 23 24 .borderBox { 25 background-clip: border-box; 26 } 27 .paddingBox { 28 background-clip: padding-box; 29 } 30 .contentBox { 31 background-clip: content-box; 32 } 33 .bgImg { 34 background-image: url(img/tom.jpg); 35 background-repeat: no-repeat; 36 } 37 .borderBox-after:after { 38 content: ""; 39 position: absolute; 40 left: 0; 41 top: 0; 42 bottom: 0; 43 right: 0; 44 background-color: #FFF; 45 } 46 </style> 47 </head> 48 <body> 49 <!--背景色的填充与background-clip有关--> 50 <!--背景色的填充规则默认是从边框左上角到右下角--> 51 <!-- background-clip属性介绍 --> 52 <!--border-box：从border填充背景色 53 padding-box：从padding区域填充背景色 54 content-box：从content区域填充背景。--> 55 <div class="bgColor">从条纹边框谈盒子模型border-box</div> 56 <div class="bgColor paddingBox">从条纹边框谈盒子模型padding-box</div> 57 <div class="bgColor contentBox">从条纹边框谈盒子模型content-box</div> 58 <div class="bgColor contentBox">从条纹边框谈盒子模型content-box</div> 59 60 <div class="bgColor bgImg">从条纹边框谈盒子模型content-box</div> 61 <div class="bgColor paddingBox bgImg">从条纹边框谈盒子模型content-box</div> 62 <div class="bgColor contentBox bgImg">从条纹边框谈盒子模型content-box</div> 63 <div class="bgColor borderBox-after">从条纹边框谈盒子模型border-box</div> 64 </body> 65 </html>