類似下面這個圖形，只使用一個標簽，可以有多少種實現方式：(不考慮兼容性的情況下)

假設我們的單標簽為? 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>

總結

以上是生活随笔為你收集整理的从条纹边框的实现谈盒子模型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。