欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解CSS的border邊框?qū)傩约捌湓贑SS3中的新特性

Kayo   發(fā)布時間：2016-05-10 10:54:39   作者：Kayo Lee   我要評論
這篇文章主要介紹了詳解CSS的border邊框?qū)傩约捌湓贑SS3中的新特性,既涵蓋了基礎的邊框?qū)挾扰c顏色設置又講到了CSS3中的圖片邊框及邊框漸變,需要的朋友可以參考下

基礎
你可能很熟悉邊的最基本用法。

CSS Code復制內(nèi)容到剪貼板
  1. border: 1px solid black;  

上面的代碼將給元素應用1px的邊。即簡潔又簡單；但我們也可以稍作修改。

CSS Code復制內(nèi)容到剪貼板
  1. border-width: thick;   
  2. border-style: solid;   
  3. border-color: black;  

除了指定具體的邊框?qū)挾戎?，也可以使用這三個關鍵詞：thin，medium 和 thick。
2016510104716910.jpg (773×528)

雖然乍看起來單個屬性的方式?jīng)]必要，但有極少數(shù)的情況下，當它是有利的，例如當你需要在特定的事件發(fā)生時更新邊的部分屬性。
也許你需要在用戶將鼠標懸停在一個特定的元素上時改變這個元素的邊框顏色。使用復合屬性需要重復像素值和邊的樣式。

CSS Code復制內(nèi)容到剪貼板
  1. box {   
  2.     border: 1px solid red;      
  3. }   
  4.     
  5. .box:hover {   
  6.     border: 1px solid green;   
  7. }  

一個更優(yōu)雅的和簡潔（DRY，don’t repeat yourself）的做法是只更新邊的顏色屬性。

CSS Code復制內(nèi)容到剪貼板
  1. .box {   
  2.     border: 1px solid red;      
  3. }   
  4.     
  5. .box:hover {   
  6.     border-color: green;   
  7. }  

此外，一會你會發(fā)現(xiàn)，這種單個屬性的方式有助于通過CSS創(chuàng)建自定義的形狀。

CSS3新特性
在 CSS3 中，border 增加了兩個新的特性，一是邊框圖片，而是在邊框顏色中使用漸變色。
邊框圖片利用 border-image 屬性實現(xiàn)，可以為一個元素指定一個圖片作為邊框，代替?zhèn)鹘y(tǒng)的線條邊框，它有五個子屬性：

CSS Code復制內(nèi)容到剪貼板
  1. border-image-source  

設置邊框圖片的圖片地址，只有設置了這個屬性，才算是使用了邊框圖片，其值為 url() 的形式。

CSS Code復制內(nèi)容到剪貼板
  1. border-image-width  

該屬性指定邊框厚度，其值可以為帶單位的長度值，也可以是不帶單位的浮點值或百分比，還可以是“auto”，這時其值為 border-image-slice 的值，“auto”值很常用，可以方便地做出類似相冊邊框的精致邊框。

CSS Code復制內(nèi)容到剪貼板
  1. border-image-slice  

該屬性指定從上，右，下，左方位來分隔圖像，將圖像分成4個角，4條邊和中間區(qū)域共9份，中間區(qū)域始終是透明的（即沒圖像填充），除非加上關鍵字 fill，其值可以為數(shù)值或百分比。例如：設置 border-image-slice: 20 25 30 35; border-image-slice: auto，則圖像會產(chǎn)生像下圖那樣的四個角：
原圖劃分示意圖：
2016510104942414.jpg (469×352)

實際效果圖
2016510105003986.jpg (452×269)

CSS Code復制內(nèi)容到剪貼板
  1. border-image-outset  

該值設置邊框圖片的擴展，相當于在邊框內(nèi)容加入“padding”。

CSS Code復制內(nèi)容到剪貼板
  1. border-image-repeat  

設置用何種方式填充邊框，其值可以為 stretch、repeat、round、space，stretch 是拉伸方式，repeat、round 和 space 方式都是平鋪方式，但三個之間略有不同，repeat 是直接平鋪圖片，圖片若超出邊框時截斷，round 會動態(tài)調(diào)整圖片的大小，直到圖片正好可以鋪滿整個邊框，space 則會在圖片之間增加空白，直至圖片正好可以鋪滿整個邊框。
值得注意的是，直至 Chrome 23, Firefox 17, Safari 5.1.7, Opera 12.5 ，IE 10 ，僅有 Firefox 支持 round ，沒有任何瀏覽器支持 space 。
接下來是邊框梯度顏色，相對邊框圖片，邊框梯度顏色的瀏覽器支持度就更低了，暫時只有 Firefox 能通過私有屬性支持。但作為一個很酷的效果，也可以先留意一下：

CSS Code復制內(nèi)容到剪貼板
  1. .gradientcolor{   
  2.     border: 6px solid #fff;   
  3.     -moz-border-bottom-colors: #ff9900 #99cc33 #ccc;   
  4.     -moz-border-top-colors:    #ff9900 #99cc33 #ccc;   
  5.     -moz-border-left-colors:   #ff9900 #99cc33 #ccc;   
  6.     -moz-border-right-colors:  #ff9900 #99cc33 #ccc;   
  7. }  

效果如下：
2016510105055318.png (368×241)

相關文章

  • 在線CSS邊框圓角效果代碼工具

    這是一款由腳本之家翻譯自國外網(wǎng)站的在線CSS工具，可在線調(diào)整生成樣式的邊框圓角效果，以及邊框的寬度、顏色、樣式等屬性，還可實時預覽生成的CSS代碼，并支持一鍵復制代碼
    2017-09-19

  • css3圖片邊框border-image的用法

    在CSS3里引入的很多新特征中，這篇文章主要介紹了css3圖片邊框border-image的用法,具有一定的參考價值，有興趣的可以了解一下
    2017-06-30

  • 使用CSS的border屬性構建變形邊框的方法總結

    border是最常用的用來制作各種各樣div邊框的CSS屬性,這里我們整理了使用CSS的border屬性構建變形邊框的方法總結,最主要的還是基于三角形的一些圖形變換:
    2016-06-23

  • border-radius以外的CSS圓角邊框制作方法

    用CSS3的border-radius屬性來制作圓角邊框相當順手,然而瀏覽器的兼容問題并不是太好處理,這里我們就來總結一下border-radius以外的CSS圓角邊框制作方法.
    2016-06-02

  • 深入淺析css3 border-image邊框圖像詳解

    css3中新增了一個屬性 border-image ，這個屬性允許開發(fā)者使用圖片來定義邊框,擴充了 CSS2 中僅有的幾個預定義邊框樣式(border-style)。本文給大家介紹css3 border-image邊
    2015-11-24

  • CSS3之邊框多顏色Border-color屬性使用示例

    Border-color是專為邊框的多顏色而準備的屬性，接下來為大家介紹一下CSS3之邊框多顏色Border-color的使用，喜歡的朋友不要錯過
    2013-10-11

  • 一文教你玩轉(zhuǎn)CSS border(邊框)

    這篇文章主要介紹了一文教你玩轉(zhuǎn)CSS border(邊框),本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2021-02-19

最新評論