使用CSS3 border-image 屬性,你可以在元素的周圍設置圖片邊框。
表中的數字指定完全支持該屬性的第一個瀏覽器版本。
數字后面的 -webkit- 或者 -moz- 使用時需要指定前綴。
CSS3 border-image 屬性允許您指定要用來代替元素周圍的正常邊界的圖像。屬性有三個部分:
以下面的圖像(叫做 "border.png")為例:
原理分析:
border-image 性將圖像分割成九個部分,就像一個井字游戲板。然后將角放在拐角處,中間部分按指定的順序重復或拉伸。
注意:
讓border-image 正常工作, 元素也需要設置邊框屬性!
1. 圖像的中間部分重復創建邊界,圖片作為邊框
CSS代碼:
<!DOCTYPE CSS>
<CSS lang="en">
<head>
<meta charset="UTF-8">
<title>項目</title>
</head>
<body>
<p id="borderimg">在這里,圖像的中間部分被延伸來創建邊界.</p>
<p>這里是原始圖像:</p><img src="img/border.png">
</body>
</CSS>
代碼如下:
#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. 圖像的中間部分延伸到創建邊界:使用圖片作為邊框!
實例代碼:
#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 的縮寫.
不同的切片值完全改變邊框的樣子:
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;
}
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;
}
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網絡爬蟲與數據挖掘知識,可前往專業網站:http://pdcfighting.com/
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
邊框可以是圖片img,也可以是div元素,也可以是table,也可以是span
一、邊框樣式的三要素:
1、邊框的寬度 border-width
2、邊框的外觀 border-style
3、邊框的顏色 border-color
二、邊框屬性
語法:
border-width:像素值;
border-style: 屬性值;none 無樣式、dashed虛線、solid實線
border-color:關鍵字或者RGB值。
舉例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>12CSS</title>
<style type="text/css">
div
{
width=100px;
height=50px;
}
#div1
{
border-width: 2;
border-style: solid;
border-color:red;
}
</style>
</head>
<body>
<div id=div1>你好,嘻嘻</div>
<div>你好,嘻嘻</div>
</body>
</html>
邊框三個屬性簡寫
語法:
border:1px solid red;
等價于
border-width:1px;
border-style: solid;
border-color:red;
舉例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>12CSS</title>
<style type="text/css">
div
{
border: 1px solid red;
}
</style>
</head>
<body>
<div>你好,嘻嘻</div>
</body>
</html>
三、局部樣式
一個框有四個邊,如果想單獨設置一個邊就需要單獨設定
1、上邊框border-top
border-top-width: 1px;
border-top-style: solid;
border-top-color: red;
簡寫為:
border-top: 1px solid red;
2、下邊框border-bottom
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: red;
簡寫為:
border-bottom: 1px solid red;
3、左邊框border-left
border-left-width: 1px;
border-left-style: solid;
border-left-color: red;
簡寫為:
border-left: 1px solid red;
4、右邊框border-right
border-right-width: 1px;
border-right-style: solid;
border-right-color: red;
簡寫為
border-right: 1px solid red;
整體舉例
HTML文檔中使用的圖像的目的有:第一,使頁面具有視覺效果;第二個:顯示有用信息。此外,圖像也可以用作鏈接。
雖然使用圖像有很多好處,但是包含太多圖像的頁面通常看起來過于雜亂,并且可能需要花費太長的時間來加載。
要顯示圖像,需要使用src屬性來指定圖像的路徑,如下所示有幾個方法來實現:
img標記的alt屬性定義當圖像無法加載時顯示的文本來代替該圖像。對一個考慮周到的html來說這是一個必需屬性,簡要地描述圖像是什么。
圖像通常顯示為它實際的大小,但通過使用width和height屬性,可以更改它顯示的大小。以像素或百分比形式指定圖像的大小。技巧提示:使用圖像的實際大小(以像素為單位)來指定其顯示大小,以強制瀏覽器在圖像加載之前為其分配空間,以確保無論圖像是否顯示,頁面布局都保持不變。
img標記的border屬性通過指定以像素為單位的厚度來添加邊框。您還可以設置border=“0”以刪除將圖像用作鏈接時添加的邊框。
默認情況下,圖像顯示在html代碼中指定的位置(與任何其他標記一樣)。但是,可以通過設置align=“left | right | top | bottom | middle”中的任意一個值來將圖像與周圍的文本或段落對齊。
調整圖像周圍的空白,以像素為單位。使用vspace調整上下垂直間距,或左右兩側使用hspace。
下面是以上標記的示例:
瀏覽器顯示內容如下所示:
*請認真填寫需求信息,我們會在24小時內與您取得聯系。