css3如何實(shí)現(xiàn)邊框-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)css3如何實(shí)現(xiàn)邊框，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)是專業(yè)的拉薩網(wǎng)站建設(shè)公司，拉薩接單;提供成都做網(wǎng)站、成都網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行拉薩網(wǎng)站開發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

在CSS3中.邊框多了4種新特性

1.Border-color(設(shè)置邊框顏色)

2.Border-image(通過(guò)圖片設(shè)置為邊框)

3.Border-radius(邊框的半徑)

4.box-shadow(陰影效果)

而我使用的瀏覽器版本為:IE8, FireFox10.0.9, Chrome 22.0.1229.94， Safari 5.1.7， Opera 12.50。。。基本都是新版本.

我們之前要給一個(gè)div加上邊框時(shí)，我們會(huì)這樣寫

<html>
<head>
    <style type="text/css"> 
        .border_test
        {
            border:5px solid red;    
        }
    </style>
</head>
<body>
    <div class='border_test'>常用的邊框樣式</div>
</body>
</html>

border-color

css3如何實(shí)現(xiàn)邊框

既然我們已經(jīng)可以設(shè)置邊框顏色了，為什么還要border-color呢？因?yàn)镃SS3的border有所不同.

使用border-color如果你設(shè)置了邊框?qū)挾仁荴。那么你就可以在這個(gè)這個(gè)邊框上使用X種顏色,每種顏色顯示1px的寬度.(ps:如果你邊框?qū)挾仁?0px,而你只設(shè)置了5種顏色，那么最后一種顏色將會(huì)填充剩下的寬度)

具體寫法看下面代碼

<html>
<head>
    <style type="text/css"> 
        .border_test
        {
            border:5px solid red; 
            border-color:red blue green black;
        }
    </style>
</head>
<body>
    <div class='border_test'>CSS3 Border-color樣式</div>
</body>
</html>

但是結(jié)果和我們想的并不一樣.

css3如何實(shí)現(xiàn)邊框

我們只看到了4個(gè)邊框分別對(duì)應(yīng)4種顏色.分別是上右下左。

當(dāng)然，如果我們只輸入3種顏色,中間的顏色就對(duì)應(yīng) 左和右,具體的自己試一下吧.

那么之前我們說(shuō)的每像素一種顏色的效果呢？別著急."那么你就可以在這一邊框上使用X種顏色".因?yàn)閎order-color是針對(duì)整個(gè)4條邊框的，所以不是針對(duì)某條邊框的.

如果我們需要做到上面的效果，可以針對(duì)某一條邊框設(shè)置。他們分別是:

border-top-color
border-right-color
border-bottom-color
border-left-color

所以我們需要改一下代碼

<html>
<head>
    <style type="text/css"> 
        .border_test
        {
            border:5px solid red; 
            -moz-border-top-colors:Blue Yellow Red Black Green;
            -moz-border-bottom-colors:Blue Yellow Red Black Green;
            -moz-border-right-colors:Blue Yellow Red Black Green;
            -moz-border-left-colors:Blue Yellow Red Black Green;
        }
    </style>
</head>
<body>
    <div class='border_test'>CSS3 Border-color樣式</div>
</body>
</html>

運(yùn)行后

css3如何實(shí)現(xiàn)邊框

效果出來(lái)了有木有?雖然看不太清楚，不過(guò)確實(shí)每個(gè)像素一個(gè)顏色了，這樣如果我們要做漸變顏色的話就方便了很多，只需要調(diào)整顏色就好了

css3如何實(shí)現(xiàn)邊框

.border_test
        {
            border:5px solid red; 
            -moz-border-top-colors:Blue Yellow Red Black Green;
            -ms-border-top-colors:Blue Yellow Red Black Green;
            -wekit-border-top-colors:Blue Yellow Red Black Green;
            -o-border-top-colors:Blue Yellow Red Black Green;
            border-top-colors:Blue Yellow Red Black Green;
        }

但是卻發(fā)現(xiàn)，只有火狐上出現(xiàn)了效果，也就是說(shuō),border-邊框-colors這個(gè)屬性只有在火狐上可用，其他的不兼容.可惜了..

Border-image

border-image主要是用圖片來(lái)填充邊框.

border-image的分解屬性分別為

border-image-source 指定border的背景圖的url
border-image-slice 設(shè)置圖片如何切割的屬性，非定位！
border-image-width 定義border-image的顯示區(qū)域的
border-image-repea

下面我們來(lái)逐個(gè)解析.

border-image-source

這個(gè)是指定border的背景圖的url, 例

border-image-source ：url(../images/border.gif);

這里可以設(shè)置為none,也就是無(wú)背景圖

border-image-slice

設(shè)置圖片如何切割的屬性，（重點(diǎn)理解）他的值是四個(gè)數(shù)值, 沒(méi)單位(實(shí)際上是已經(jīng)固定是px了, 注意, 這個(gè)值不能是負(fù)值或大于圖片的尺寸), 例如: border-image-slice:1 2 3 4; 你想得沒(méi)錯(cuò), 同樣對(duì)應(yīng)的是”上右下左”,將這幾個(gè)數(shù)值, 把背景圖片, 切割開來(lái),具體一會(huì)再說(shuō)

border-image-width

定義border-image的width, 這個(gè)是定義border-image的顯示區(qū)域的(這個(gè)只是在w3c上描述的, 但在實(shí)際測(cè)試過(guò), 設(shè)置這個(gè)屬性沒(méi)有作用, 但是border-width能生效)

border-image-repeat;

repeat有三個(gè)值選擇

[ stretch | repeat | round ]：拉伸 | 重復(fù) | 平鋪 (其中stretch是默認(rèn)值。)

好了，我們回頭來(lái)看slice,也就是切割.= =說(shuō)實(shí)話，不知道該怎么講,還是上圖吧.

css3如何實(shí)現(xiàn)邊框

左上圖是一個(gè)這樣的樣式.border-image-slice:10 15 20 25; 他會(huì)將圖片分割為右上邊這樣的9宮格圖片.

left,top,right,bottom分別是你設(shè)置的距離，這一部分會(huì)被抽取出來(lái)作為邊框.

top-left, top-right, bottom-left, bottom-right同樣會(huì)被抽取出來(lái)，與left,top,right,bottom不同的是，他們不會(huì)受repeat,stretch,round的影響.

而left,top,right,bottom,則有可能因?yàn)槔焓裁吹亩淖儗挾群透叨?不知道這樣說(shuō)會(huì)不會(huì)容易理解點(diǎn)?

下面看代碼

<html>
<head>
    <style type="text/css"> 
        .border_test
        {
            -webkit-border-image: url(6.jpg) 0 12 0 12 stretch stretch;
            -moz-border-image: url(6.jpg) 0 12 0 12 stretch stretch;
            -o-border-image: url(6.jpg) 0 12 0 12 stretch stretch;
            -ms-border-image: url(6.jpg) 0 12 0 12 stretch stretch;
            -border-image: url(6.jpg) 0 12 0 12 stretch stretch;
            display: block;
            
            border-width: 0 12px;
            padding: 10px;
            text-align: center;
            font-size: 16px;
            text-decoration: inherit;
            color:white;
        }
    </style>
</head>
<body>
    <div class='border_test'>CSS3 Border-image樣式</div>
</body>
</html>

效果如下

css3如何實(shí)現(xiàn)邊框

用的材料圖是

css3如何實(shí)現(xiàn)邊框

同樣可惜的是，我這里只有FireFox和Safari出了效果，當(dāng)然這也不能排序Chrome不能，因?yàn)槁犝f(shuō)有幾個(gè)版本的可以。

Border-radius

終于到圓角了，感覺花了那么多字去寫css3有點(diǎn)怪，因?yàn)楸緛?lái)很簡(jiǎn)單的- -哈

border-radius

參數(shù):半徑，不可以是負(fù)數(shù)，為0的話是直角

<html>
<head>
    <style type="text/css"> 
        .border_test
        {
            border:5px solid red; 
            -moz-border-radius:15px;
            -ms-border-radius:15px;
            -wekit-border-radius:15px;
            -o-border-radiuss:15px;
            border-radius:15px;
        }
    </style>
</head>
<body>
    <div class='border_test'>CSS3 Border-radius樣式</div>
</body>
</html>

效果

css3如何實(shí)現(xiàn)邊框

圓角效果是比較常見的，而且在FireFox,Chrome,Safari,Opera都支持圓角效果，可惜IE還是只能回老家喝粥.不過(guò)據(jù)說(shuō)IE9支持了。

相關(guān)屬性： border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius

分別對(duì)應(yīng)一個(gè)位置，需要注意的是，如果只有一個(gè)，會(huì)變成4分之1圓角，如果這4個(gè)里其中一個(gè)為0，那就回變成直角- -這個(gè)我也很納悶.

box-shadow

最后一個(gè)，陰影

<html>
<head>
    <style type="text/css"> 
        .border_test
        {
            border:5px solid red; 
            -moz-box-shadow:5px 2px 6px black;
            -ms-box-shadow:5px 2px 6px black;
            -wekit-box-shadow:5px 2px 6px black;
            -o-box-shadow:5px 2px 6px black;
            box-shadow:5px 2px 6px black;
        }
    </style>
</head>
<body>
    <div class='border_test'>CSS3 Border-shadow樣式</div>
</body>
</html>

css3如何實(shí)現(xiàn)邊框

三個(gè)像素值和顏色分別是

陰影水平偏移值（可取正負(fù)值）；陰影垂直偏移值（可取正負(fù)值）；陰影模糊值；陰影顏色

關(guān)于“css3如何實(shí)現(xiàn)邊框”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

標(biāo)題名稱：css3如何實(shí)現(xiàn)邊框-創(chuàng)新互聯(lián)
轉(zhuǎn)載來(lái)源：http://aaarwkj.com/article20/ccogco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、微信小程序、網(wǎng)站制作、小程序開發(fā)、云服務(wù)器

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

css3如何實(shí)現(xiàn)邊框-創(chuàng)新互聯(lián)