css3 边框
边框
- border-radius
- box-shadow
- border-image
border-radius
box-shadow
box-shadow: 10px 15px 5px #888888;
水平偏移10px, 垂直偏移15px, 模糊度5px, 效果:
box-shadow: 0 0 15px 5px #888888;
水平偏移0, 垂直偏移0, 模糊度15px, 偏移距离5px, 效果:
border-image
不定长边框样式
border-image: url(./images/12.png) 10 20 15 25 stretch;
source: url(img)
图片切割边距: 上 右 下 左 :10 20 10 20
( 上下 左右 :10 20 )
( 上 左右 下 :10 20 10 )
border-image-repeat : round stretched
例如 border-image-source
<div class="border-img"> <img alt="tupian" src="/web/images/test.png" style="width: 101%;"> </div>
.border-img {
width: 400px;
height: 292px;
border: 46px solid;
border-image: url(./images/12.png) 48 49 stretch;
}
效果: