Home > Article > Web Front-end > CSS in-depth understanding of borders

CSS in-depth understanding of borders

迷茫Original: 2017-03-25 10:28:471334browse

Border attributes

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

Effect), thick (5px)

2.border-style: has different values, the following analysis is the application of different values

a.solid: can realize triangles and trapezoids

<!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>
<div class="triangle"></div>我是三角形
<div class="trapezia"></div>我是梯形
</body>
</html>

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

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

d.double: double line, calculation rule, double line width is always equal, middle interval +-1, for example, 3px=1 (inner) + 1 (middle interval) + 1 ( (Externally), a three-bar pattern can be achieved.

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 Implementing equal height layout, the disadvantage is that 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 CSS in-depth understanding of borders. 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：How to show and hide divsNext article：How to show and hide divs

See more

CSS in-depth understanding of borders

Related articles