Introduction to the characteristics of the border attribute in CSS

This article brings you an introduction to the characteristics of the border attribute in CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Abbreviation order: width-style-color

eg:p{border:1px solid red;}

Introduce the characteristics of each attribute in order of abbreviation:

1. border-width:medium(default.medium):thin;thick;thick;length;inherit;

2.border-style:none(default.none);hidden( Same as none, except when applied to tables, which are used to resolve border conflicts); dotted (dotted border); dashed (dashed line), solid (solid line); double (double line); groove (3D groove); ridge (3D ridge); inset (3D embedded); outset (3D protruding); inherit;

3. border-color:color(name, hexadecimal, rgb); transparent:inherit.

4. border-radius: 0 (default value); length (px); %;

You can also assign values ​​separately: border-top-left-radius; border-top-right-radius; border-bottom-left-radius;border-bottom-right-radius;

5. border-image:source slice width outset repeat;The omitted values ​​​​are their default values

eg:

div｛
    border-image:url(img.png) 30 30 round;
    -webkit-border-image:url(img.png) 30 30 round;/*safari 5 and older*/
    -o-border-image:url(img.png) 30 30 round;/*Opera*/
｝

6. box-shadow: 0px 8px 16px 0px rgba (0,0,0,0.2)

0.2 represents transparency

Note: ie9 supports border-radius and box-shadow attribute; firefox, chrome, opera and safafi support all new border attributes (ie: border-radius; border-image and box-shadow); for border-image, safari5 and older versions require the prefix -webkit-, opera requires the prefix -o-;

Related recommendations:

About border-collapse_html/css_WEB-ITnose in css

CSS border-left-color attribute_html/css_WEB-ITnose

The above is the detailed content of Introduction to the characteristics of the border attribute in CSS. For more information, please follow other related articles on the PHP Chinese website!