一篇文章帶你了解CSS3圖片邊框

SS3圖片邊框

使用CSS3 border-image 屬性，你可以在元素的周圍設置圖片邊框。

一、瀏覽器支持

表中的數字指定完全支持該屬性的第一個瀏覽器版本。

數字后面的 -webkit- 或者 -moz- 使用時需要指定前綴。

二、CSS3 border-image 屬性

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 的縮寫.

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網絡爬蟲與數據挖掘知識，可前往專業網站：http://pdcfighting.com/

邊框可以是圖片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文檔中使用的圖像的目的有：第一，使頁面具有視覺效果；第二個：顯示有用信息。此外，圖像也可以用作鏈接。

雖然使用圖像有很多好處，但是包含太多圖像的頁面通常看起來過于雜亂，并且可能需要花費太長的時間來加載。

圖像 - <img src=“url”>

要顯示圖像，需要使用src屬性來指定圖像的路徑，如下所示有幾個方法來實現：

src="picture.jpg" - 當圖片與html文件在同一個目錄下時，直接指定圖片名
src="images/picture.jpg" - 當圖片位于其它目錄時，使用相對路徑來指定
src="http://www.htmlbasic.com/images/photo.jpg" - 當指定網絡圖片時

替代文字 - <img alt="?">

img標記的alt屬性定義當圖像無法加載時顯示的文本來代替該圖像。對一個考慮周到的html來說這是一個必需屬性，簡要地描述圖像是什么。

圖像大小 - <img width="?" height="?">

圖像通常顯示為它實際的大小，但通過使用width和height屬性，可以更改它顯示的大小。以像素或百分比形式指定圖像的大小。技巧提示：使用圖像的實際大小（以像素為單位）來指定其顯示大小，以強制瀏覽器在圖像加載之前為其分配空間，以確保無論圖像是否顯示，頁面布局都保持不變。

圖像邊框 - <img border="?">

img標記的border屬性通過指定以像素為單位的厚度來添加邊框。您還可以設置border=“0”以刪除將圖像用作鏈接時添加的邊框。

圖像對齊 - <img align="?">

默認情況下，圖像顯示在html代碼中指定的位置（與任何其他標記一樣）。但是，可以通過設置align=“left | right | top | bottom | middle”中的任意一個值來將圖像與周圍的文本或段落對齊。

圖像空白 - <img ... vspace="?" hspace="?">

調整圖像周圍的空白，以像素為單位。使用vspace調整上下垂直間距，或左右兩側使用hspace。

例子

下面是以上標記的示例：

瀏覽器顯示內容如下所示：

在線咨詢

上一篇：用HTML怎么制作網頁呢?
下一篇：JSP中四種傳遞參數的方法（個人總結，簡單實用）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商