整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

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

          SS3圖片邊框

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


          一、瀏覽器支持

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

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

          二、CSS3 border-image 屬性

          CSS3 border-image 屬性允許您指定要用來代替元素周圍的正常邊界的圖像。屬性有三個部分:

          1. 作為邊框的圖片。
          2. 在哪里分割圖像。
          3. 確定中間部分應重復或延伸。

          以下面的圖像(叫做 "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/

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

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

          圖像 - <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。

          例子

          下面是以上標記的示例:

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


          主站蜘蛛池模板: 国产精品99精品一区二区三区| 国产精品无码不卡一区二区三区 | 国产在线观看一区二区三区| 精品成人一区二区三区四区| 麻豆一区二区三区精品视频| 日本免费一区尤物| 蜜臀AV一区二区| 人妻体内射精一区二区三四| 日韩人妻无码一区二区三区综合部 | 国产无线乱码一区二三区 | 欧美日韩精品一区二区在线视频 | 美女免费视频一区二区三区| 亚洲AV无码片一区二区三区| 国产日韩一区二区三区在线播放 | 久久影院亚洲一区| 人妻视频一区二区三区免费| 国产91大片精品一区在线观看| 风间由美性色一区二区三区| 午夜福利一区二区三区在线观看| 中文字幕Av一区乱码| 农村人乱弄一区二区| 国产亚洲无线码一区二区| 无码人妻久久一区二区三区免费 | 无码囯产精品一区二区免费 | 国产高清视频一区二区| 国产伦精品一区二区三区免费迷| 国产精品一区二区三区久久 | 精品乱子伦一区二区三区| 久久精品人妻一区二区三区 | 中文字幕av一区| 另类ts人妖一区二区三区| 国产香蕉一区二区三区在线视频| 夜夜精品视频一区二区| 国产主播一区二区三区在线观看| 日韩社区一区二区三区| 国产成人无码一区二区三区在线 | 无码欧精品亚洲日韩一区| 人妻天天爽夜夜爽一区二区| 亚洲熟女综合一区二区三区| 国产主播福利精品一区二区| 国产精品无码一区二区在线观一|