A detailed introduction to the border attribute of CSS-CSS Tutorial-php.cn

A detailed introduction to the border attribute of CSS

高洛峰

Release： 2017-03-19 14:30:24

Original

2321 people have browsed it

1.border-width: does not support percentage, supports keywords, thin (1px), medium (default value, 3px, The reason why the default value is 3px is that border-style is only valid when the border is 3px and above.

Effect), thick (5px)

2.border- style: has different values. The following analyzes the applications of different values

a.solid: triangles and trapezoids can be realized

<!DOCTYPE html><html><head>
    <title>用solid实现三角和梯形</title>
    <meta charset="utf-8">
    <style type="text/css">
        .triangle{
            width: 0px;
            height: 0px;
            border-style:solid;
            border-width: 50px;
            border-color: red transparent transparent transparent;

        }
        .trapezia{
            width: 40px;
            height: 40px;
            border-style: solid;
            border-width: 50px;
            border-color:transparent transparent green transparent ;
            margin-top: 10px;
        }
    </style></head><body><p class="triangle"></p>我是三角形<p class="trapezia"></p>我是梯形</body></html>

Copy after login

b.dashed: dashed line, in chrome/Firefox browser , the ratio of dotted line and solid line is 3:1 (thin), in IE browser, the ratio is 2:1 (dense)

　c.dotted: dotted line , in chrome/Firefox browser, it is a square dot, in IE browser, it is a round dot (you can use round dots to achieve the rounded corner effect)

　d.double: double line, calculation rule, double line The width is always equal, and the middle interval is +-1. For example, 3px=1 (inner) + 1 (middle interval) + 1 (outer), which can realize a three-bar graphic.

e.inset (concave), outset (convex), ridge (groove): outdated style, poor compatibility, no usage scenarios

3.border-color: in When specifying color, use color as the border color. You can use this feature to simplify the css style code when the link changes color. For example:

<!DOCTYPE html><html><head>
    <title>鼠标移动时边框颜色的改变</title>
    <meta charset="utf-8">
    <style type="text/css">
        .a{
            width: 30px;
            height: 30px;
            padding: 20px;
            margin:30px;
            color: red;
            border:1px solid;
        }
        .a:hover{
            color: blue;/*            border:1px solid;*/        }

    </style></head><body><p class="a">哈哈</p></body></html>

Copy after login

4. Use border to position the background image, because the background image does not calculate the border when positioning

5. Use border to achieve equal height layout, disadvantages It does not support percentage width

(4 and 5 are similar, both use borders to make the distance from a certain side fixed)

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