Detailed explanation of the border attribute of CSS style-CSS Tutorial-php.cn

Detailed explanation of the border attribute of CSS style

高洛峰

Release： 2017-03-15 10:42:37

Original

2804 people have browsed it

border usage details:

1, border-width AttributeSet the width of the border

Possible Value: Pixel

2, border-style Property sets the style of the border

Possible values: solid (straight line), dashed (dashed line), dotted (dotted line)

2, border-color Property sets the border color

Possible values: red,#f00,#ff0000,rgb(255,0,0),transparent

border-left Property setting left border

border-right Property setting right border

border-top Attribute setting top border

border-bottom Attribute setting bottom border

Extension extension

html code

<p></p>

Copy after login

<p></p>

css code

 p {
    height: 20px;
    width: 20px;
    border-color: #FF9600 #3366ff #12ad2a #f0ed7a;
    border-style: solid;
    border-width: 20px;
}

Copy after login

result

css code

 p {    
    width: 0px;
    height: 0px;
    border-color: #FF9600 #3366ff #12ad2a #f0ed7a;
    border-style: solid;
    border-width: 20px;
}

Copy after login

result

css code

 p {    
    width: 0px;
    height: 0px;
    border-color: lightblue transparent trnasparent transparent;
    border-style: solid;
    border-width: 20px;
}

Copy after login

result

css code

 p {    
    width: 0px;
    height: 0px;
    border-color: transparent trnasparent pink;
    border-style: solid;
    border-width: 20px;
}

Copy after login

result

css Code

 p {    
    width: 0px;
    height: 0px;
    border-color: transparent gray trnasparent transparent;
    border-style: solid;
    border-width: 20px;
}

Copy after login

Result

css code

 p {    
    width: 0px;
    height: 0px;
    border-color: transparent transparent trnasparent lightgreen;
    border-style: solid;
    border-width: 20px;
}

Copy after login

Result

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