How to use the border attribute of css3-CSS Tutorial-php.cn

This time I will show you how to use the border attribute of css3, and what are the precautions when using the css3 border attribute. The following is a practical case, let's take a look.

Border in CSS3. This is no stranger to us. How many times have we written border:1px solid red... So what surprises will CSS3 bring us?

In CSS3, the border has 4 new features

1.Border-color(Set the border color )

2.Border-image (set as border through image)

3.Border-radius(radius of border)

4.box-shadow(shadow effect)

The browser versions I use are: IE8, FireFox10.0.9, Chrome 22.0.1229.94, Safari 5.1.7, Opera 12.50. . . Basically they are the latest version.

When we wanted to add a border to a p before, we would write like this

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

Copy after login

border-color

Since we can already set the border color, why do we need border-color? Because the border of CSS3 is different.

Use border-color if you set the border width to X. Then you can use X colors on this border, each color showing a width of 1px. (ps: If your border width is 10px, and you only set 5 colors, then the last color will fill the remaining The width below)

See the code below for the specific writing method

<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>

Copy after login

But the result is different from what we thought.

We only look at The 4 borders correspond to 4 colors respectively. They are upper, right, lower and left.

Of course, if we only enter 3 colors, the middle color corresponds to the left and right. Try it yourself.

Then the effect of one color per pixel we mentioned before Woolen cloth? Don't worry. "Then you can use X colors on this border." Because border-color is for the entire 4 borders, it is not for a certain border.

If we need to do it The above effects can be set for a certain border. They are:

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

So we need to change the code

<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>

Copy after login

After running

Is there any effect? Although I can’t see clearly, it does appear that each pixel has a color. This makes it much more convenient if we want to do a gradient color. Just need to adjust the color

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

Copy after login

But I found that the effect only appeared on Firefox, that is to say, the border-border-colors attribute is only available on Firefox. Others are not compatible. What a pity..

Border-image

##border-image mainly uses pictures to fill the border.

The decomposition attributes of border-image are

border-image-source specifies the url of the background image of the border
border-image-slice Sets the properties of how to slice the image, non-positioning!
border-image-width defines the display area of border-image
border-image-repea

Let’s analyze it one by one.

border-image-source

This is the url that specifies the background image of the border, for example

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

Copy after login

This can be set to none, that is, no background image

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>

Copy after login

效果如下

用的材料图是

同样可惜的是，我这里只有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>

Copy after login

效果

圆角效果是比较常见的，而且在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>

Copy after login