css 科技 边框_一篇文章带你学习CSS3图片边框
這篇文章我們來講一下在網(wǎng)站建設中，一篇文章帶你學習CSS3圖片邊框。本文對大家進行網(wǎng)站開發(fā)設計工作或者學習都有一定幫助，下面讓我們進入正文。
使用CSS3 border-image 屬性，你可以在元素的周圍設置圖片邊框。
一、瀏覽器支持
表中的數(shù)字指定完全支持該屬性的第一個瀏覽器版本。
數(shù)字后面的 -webkit- 或者 -moz- 使用時需要指定前綴。
二、CSS3 border-image 屬性
CSS3 border-image 屬性允許您指定要用來代替元素周圍的正常邊界的圖像。屬性有三個部分:
作為邊框的圖片。
在哪里分割圖像。
確定中間部分應重復或延伸。
以下面的圖像(叫做 "border.png")為例：
原理分析：
border-image 性將圖像分割成九個部分，就像一個井字游戲板。然后將角放在拐角處，中間部分按指定的順序重復或拉伸。
注意:
讓border-image 正常工作, 元素也需要設置邊框屬性!
1. 圖像的中間部分重復創(chuàng)建邊界，圖片作為邊框
CSS代碼：
項目在這里，圖像的中間部分被延伸來創(chuàng)建邊界.
這里是原始圖像:
代碼如下：
#borderimg {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(img/border.png) 30 round; /* Safari 3.1-5 */
-o-border-image: url(img/border.png) 30 round; /* Opera 11-12.1 */
border-image: url(img/border.png) 30 round;
}
2. 圖像的中間部分延伸到創(chuàng)建邊界：使用圖片作為邊框!
實例代碼：
#borderimg {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(img/border.png) 30 stretch;
/* Safari 3.1-5 */
-o-border-image: url(img/border.png) 30 stretch;
/* Opera 11-12.1 */
border-image: url(img/border.png) 30 stretch;
}
注意: border-image 屬性是border-image-source, border-image-slice, border-image-width, border-image-outset 和 border-image-repeat 的縮寫.
1. 不同的切片值
不同的切片值完全改變邊框的樣子：
實例 1
border-image: url(border.png) 50 round;
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(img/border.png) 50 round;
/* Safari 3.1-5 */
-o-border-image: url(img/border.png) 50 round;
/* Opera 11-12.1 */
border-image: url(img/border.png) 50 round;
}
實例 2
border-image: url(border.png) 20% round;
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(img/border.png) 20% round;
/* Safari 3.1-5 */
-o-border-image: url(img/border.png) 20% round;
/* Opera 11-12.1 */
border-image: url(img/border.png) 20% round;
}
實例 3
border-image: url(border.png) 30% round;
代碼如下：
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(img/border.png) 30% round;
/* Safari 3.1-5 */
-o-border-image: url(img/border.png) 30% round;
/* Opera 11-12.1 */
border-image: url(img/border.png) 30% round;
}
三、總結
本文基于CSS基礎，使用CSS語言，介紹了有關CSS定義圖片邊框的知識點，從基礎的屬性概念入手 ，border-image的用法，在實際應用中需要注意的問題，做了詳細的講解。通過一個個實例的演示。希望幫助你更好的學習CSS。
想學習更多Python網(wǎng)絡爬蟲與數(shù)據(jù)挖掘知識，可前往專業(yè)網(wǎng)站： http://pdcfighting.com/
到此這篇關于一篇文章帶你學習CSS3圖片邊框的文章就介紹到這了,更多相關CSS3圖片邊框內容請搜索本站以前的文章或繼續(xù)瀏覽下面的相關文章，感謝支持！
相關閱讀
總結
以上是生活随笔為你收集整理的css 科技 边框_一篇文章带你学习CSS3图片边框的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【前端】input隐藏的三种方法和区别
- 下一篇： css 科技 边框_CSS3实现发光边框