类似下面这个图形，只使用一个标签，可以有多少种实现方式：(不考虑兼容性的情况下)
假设我们的单标签为
div定义如下通用 CSS:
div{ position:relative; width: 180px; height: 180px;}NO.1 方案一：div上是棕色背景，伪类是白色背景
在div的css上加背景和border：
div{
position:relative; width: 180px; height: 180px;
background:#9c27b0;
border:20px dashed #2196f3;}再加一个伪类：
div:after {
content:""; position:absolute; top:0;
left:0;
bottom:0;
right:0;
background:#fff;NO.2 方案二：div上是白色背景，伪类是棕色背景
(主要是background-clip及z-index实现)
在div的css上加背景和border：
div{
position:relative; width: 180px; height: 180px;
background:#fff;
background-clip:padding-box;
border:20px dashed #2196f3;}再加一个伪类：
div:after {
content:""; position:absolute; top:-20px;
left:-20px;
bottom:-20px;
right:-20px;
background:#9c27b0;
z-index:-1;转载请注明：前端录»从条纹边框的实现谈盒子模型
<script src="http://www.wozhuye.com/index.php?m=digg&c=index&a=init&id=4-347-2"></script>
