In a web page, almost all elements can be defined with a border. The border has three main attributes, namely width, appearance and color, which are controlled by border-width, border-style and border-color respectively (all three attributes must be set simultaneously).

First, the overall style

1. Border properties

  • Border-width: defines the width of the border. The value is one pixel;
  • Border-style: defines the border appearance. Common values are as follows:
Attribute values instructions
none There is no style
dashed Dotted line
solid The solid line
  • Border-color: defines the border color. The value can be a keyword or hexadecimal RGB value.

The following is an example:

<! DOCTYPEhtml>
<html>
    <head>
        <meta name="keywords" content="Personal homepage, HTML study notes"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="Learning Examples"/>
        <meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
                border-width: 2px;
                border-style: dashed;
                border-color: aquamarine;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>
Copy the code

This looks like this in the browser:

2. Short form

For code:

div{
        border-width: 2px;
        border-style: dashed;
        border-color: aquamarine;
    }
Copy the code

This can be abbreviated as:

div{ border: 2px dashed aquamarine; }
Copy the code

Second, local styles

A border has four sides, up, down, left and right. You can style an edge separately.

For example, the above frame can be written as:

border-top-width:2px;
border-top-style:solid;
border-top-color:red;
Copy the code

Border-top :2px solid red;

The other three borders are: border-bottom, border-left, border-right.

Examples are as follows:

<! DOCTYPEhtml>
<html>
    <head>
        <meta name="keywords" content="Personal homepage, HTML study notes"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="Learning Examples"/>
        <meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
                border-top: 2px dashed aquamarine;
                border-bottom: 3px solid rebeccapurple;
                border-left: 2px dashed yellowgreen;
                border-right: 3px solid wheat;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>
Copy the code

The browser displays:

3. Use border to draw a triangle

  • Step1: first set the width and height of the div to 0, and then set the color and width of the four borders:
<! DOCTYPEhtml>
<html>
    <head>
        <meta name="keywords" content="Personal homepage, HTML study notes"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="Learning Examples"/>
        <meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
        <style type="text/css">
            div{
                width: 0px;
                height: 0px;
                border-top: 50px solid aquamarine;
                border-bottom: 50px solid rebeccapurple;
                border-left: 50px solid yellowgreen;
                border-right: 50px solid wheat;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>
Copy the code

The following results are obtained:

  • Step2: Change the color of three of the frames to transparent, then the triangle can be obtained:
<! DOCTYPEhtml>
<html>
    <head>
        <meta name="keywords" content="Personal homepage, HTML study notes"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="Learning Examples"/>
        <meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
        <style type="text/css">
            div{
                width: 0px;
                height: 0px;
                border-top: 50px solid aquamarine;
                border-bottom: 50px solid transparent;
                border-left: 50px solid transparent;
                border-right: 50px solid transparent;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>
Copy the code

The effect is as follows: