css3的邊框屬性如何使用-css教學-PHP中文網

首頁

web前端

css教學

css3的邊框屬性如何使用

php中世界最好的语言

Mar 21, 2018 pm 04:47 PM

css css3

這次帶給大家css3的邊框屬性如何使用，使用css3邊框屬性的注意事項有哪些，下面就是實戰案例，一起來看一下。

CSS3中的邊框(Border). 這對我們來說並不陌生.多少次寫下 border:1px solid red了..那麼CSS3中會給我們帶來什麼驚喜呢？

在CSS3.邊框多了4種新功能

1.Border-color(設定邊框顏色)

2.Border-image(透過圖片設定為邊框)

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

4.box-shadow(陰影效果)

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

我們之前要給一個p加上邊框時，我們會這樣寫

<html>
<head>
    <style type="text/css"> 
        .border_test
        {
            border:5px solid red;    
        }
    </style>
</head>
<body>
    <p class=&#39;border_test&#39;>常用的边框样式</p>
</body>
</html>

登入後複製

border-color

既然我們已經可以設定邊框顏色了，為什麼還要border-color呢？因為CSS3的border有所不同.

使用border-color如果你設定了邊框寬度是X。那你就可以在這個這個邊框上使用X種顏色,每種顏色顯示1px的寬度.(ps:如果你邊框寬度是10px,而你只設定了5種顏色，那麼最後一種顏色將會填滿下的寬度)

具體寫法看下面程式碼

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

登入後複製

但是結果和我們想的並不一樣.

我們只看到了4個邊框分別對應4種顏色.分別是上右下左。

當然，如果我們只輸入3種顏色,中間的顏色就對應左和右,具體的自己試一下吧.

那麼之前我們說的每像素一種顏色的效果呢？別急."那麼你就可以在這一邊框上使用X種顏色".因為border-color是針對整個4條邊框的，所以不是針對某條邊框的.

如果我們需要做到上面的效果，可以針對某一條邊框設定。他們分別是:

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>
    <p class=&#39;border_test&#39;>CSS3 Border-color样式</p>
</body>
</html>

登入後複製

運行後

效果出來了有木有?雖然看不太清楚，不過確實每個像素一個顏色了，這樣如果我們要做漸變顏色的話就方便了很多，只需要調整顏色就好了

.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;
        }

登入後複製

但是卻發現，只有火狐上出現了效果，也就是說,border-邊框-colors這個屬性只有在火狐上可用，其他的不相容.可惜了..

Border-image

#border-image主要是用圖片來填滿邊框.

border-image的分解屬性分別為

border-image-source 指定border的背景圖的url
#border-image-slice 設定圖片如何切割的屬性，非定位！
border-image-width 定義border-image的顯示區域的
border-image-repea

#下面我們來逐一解析.

border-image-source

#這個是指定border的背景圖的url, 例

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

登入後複製

這裡可以設定為none,也就是無背景圖

border-image-slice

设置图片如何切割的属性，（重点理解）他的值是四个数值, 没单位(实际上是已经固定是px了, 注意, 这个值不能是负值或大于图片的尺寸), 例如: border-image-slice:1 2 3 4; 你想得没错, 同样对应的是”上右下左”,将这几个数值, 把背景图片, 切割开来,具体一会再说

border-image-width

定义border-image的width, 这个是定义border-image的显示区域的(这个只是在w3c上描述的, 但在实际测试过, 设置这个属性没有作用, 但是border-width能生效)

border-image-repeat;

repeat有三个值选择

[ stretch | repeat | round ]：拉伸 | 重复 | 平铺 (其中stretch是默认值。)

好了，我们回头来看slice,也就是切割.= =说实话，不知道该怎么讲,还是上图吧.

左上图是一个这样的样式.border-image-slice:10 15 20 25; 他会将图片分割为右上边这样的9宫格图片.

left,top,right,bottom分别是你设置的距离，这一部分会被抽取出来作为边框.

top-left, top-right, bottom-left, bottom-right同样会被抽取出来，与left,top,right,bottom不同的是，他们不会受repeat,stretch,round的影响.

而left,top,right,bottom,则有可能因为拉伸什么的而改变宽度和高度.不知道这样说会不会容易理解点?

下面看代码

<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>
    <p class=&#39;border_test&#39;>CSS3 Border-image样式</p>
</body>
</html>

登入後複製

效果如下

用的材料图是

同样可惜的是，我这里只有FireFox和Safari出了效果，当然这也不能排序Chrome不能，因为听说有几个版本的可以。

Border-radius

终于到圆角了，感觉花了那么多字去写css3有点怪，因为本来很简单的- -哈

border-radius

参数:半径，不可以是负数，为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>
    <p class=&#39;border_test&#39;>CSS3 Border-radius样式</p>
</body>
</html>

登入後複製

效果

圆角效果是比较常见的，而且在FireFox,Chrome,Safari,Opera都支持圆角效果，可惜IE还是只能回老家喝粥.不过据说IE9支持了。

相关属性： border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius

分别对应一个位置，需要注意的是，如果只有一个，会变成4分之1圆角，如果这4个里其中一个为0，那就回变成直角- -这个我也很纳闷.

box-shadow

最后一个，阴影

<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>
    <p class=&#39;border_test&#39;>CSS3 Border-shadow样式</p>
</body>
</html>

登入後複製