亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

基礎(chǔ)
你可能很熟悉邊的最基本用法。

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

上面的代碼將給元素應(yīng)用1px的邊。即簡(jiǎn)潔又簡(jiǎn)單；但我們也可以稍作修改。

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

除了指定具體的邊框?qū)挾戎担部梢允褂眠@三個(gè)關(guān)鍵詞：thin，medium 和 thick。
2016510104716910.jpg (773×528)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS Code復(fù)制內(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)

相關(guān)文章

  • 在線(xiàn)CSS邊框圓角效果代碼工具

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

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

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

  • 使用CSS的border屬性構(gòu)建變形邊框的方法總結(jié)

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

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

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

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

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

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

    Border-color是專(zhuān)為邊框的多顏色而準(zhǔn)備的屬性，接下來(lái)為大家介紹一下CSS3之邊框多顏色Border-color的使用，喜歡的朋友不要錯(cuò)過(guò)
    2013-10-11

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

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

最新評(píng)論