border-image用法詳解
阿新 • • 發佈：2017-12-02
cli 方法 sharp 樣式 image clip type tex 用法
圖像邊框 border-image
使用方法：border-image:url(‘圖像路徑‘) 邊距（不能帶單位）/寬度 上下方式 左右方式；（四個邊距，上右下左，相同時可縮寫為一個）
repeat平鋪 stretch拉伸 round
<style type="text/css">
.div1{
display: inline-block;
margin-right: 30px;
background: #000;
width: 389px;
height: 389px;
border-style: solid;
border-width: 100px; /*設置邊框寬度之前要先設置邊框樣式，不然不會顯示的，這是在content外添加空間*/
border-image:url("images/3.jpg") 100 repeat;
}
.div2{
display: inline-block;
background: darkred;
width: 389px;
height: 389px;
/*直接在border-image中設置border寬度,這樣實際上是占用了content的區域空間*/
border-image:url("images/3.jpg") 100/100px repeat;
}
</style>
</head>
<body>
<div class="div1">CSS3新增的background-clip屬性</div>
<div class="div2">CSS3新增的background-clip屬性</div>
</body>
border-image用法詳解