Home > Article > Web Front-end > A detailed introduction to the border attribute of CSS

A detailed introduction to the border attribute of CSS

高洛峰Original: 2017-03-19 14:30:242321browse

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>

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：An introduction to five ways to implement Footer placement using CSSNext article：An introduction to five ways to implement Footer placement using CSS

See more

A detailed introduction to the border attribute of CSS

Related articles