之前我曾經寫過一篇關于CSS的border-image屬性的文章。現在幾乎所有的現代瀏覽器都支持這個屬性——除了IE10及以下IE版本。

看起來這是一個非常漂亮的CSS功能，它可以讓你用圖片修飾元素的邊框。下面是一個實例演示，你可以拖拽調整里面的方塊的大小，看看有什么邊框圖案的變化。

HTML代碼

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

CSS代碼

body {

font-family: Arial, sans-serif;

text-align: center;

}

.bi {

border: 45px solid transparent;

-webkit-border-image: url(http://www.webhek.com/wordpress/wp-content/uploads/2014/07/bg-pawprints-all.jpg) 45 round;

-moz-border-image: url(http://www.webhek.com/wordpress/wp-content/uploads/2014/07/bg-pawprints-all.jpg) 45 round;

border-image: url(http://www.webhek.com/wordpress/wp-content/uploads/2014/07/bg-pawprints-all.jpg) 45 round;

font-family: Arial, Helvetica, sans-serif;

color: #222;

width: 500px;

margin: 30px auto 30px auto;

overflow: hidden;

resize: both;

}

演示

但不幸的是，這么好的一個功能，卻沒有看到多少人使用它，也許是我的眼界太窄。如果你在哪看到過有人使用border-image屬性，或你在真正項目中使用了它，請留言告訴我。

總結

以上是生活随笔為你收集整理的css没有border,你未必知道的CSS小知识：为什么没有人使用border-image的全部內容，希望文章能夠幫你解決所遇到的問題。

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