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;
}

效果：