CSS 边框是用于设置元素边框的速记属性。
该CSS边框属性用于指定一个元素的边框的样式,颜色和大小。CSS 边框属性如下所示
border-style
border-color
border-width
border-radius
Border style 属性用于指定要在网页上显示的边框类型。
有一些边框样式值与边框样式属性一起使用来定义边框。
价值 | 描述 |
---|---|
none | 它没有定义任何边界。 |
dotted | 它用于定义虚线边框。 |
dashed | 它用于定义虚线边框。 |
solid | 它用于定义实心边框。 |
double | 它定义了两个具有相同边框宽度值的边框。 |
groove | 它定义了一个 3d 凹槽边界。效果是根据边框颜色值生成的。 |
ridge | 它定义了一个 3d 脊状边界。效果是根据边框颜色值生成的。 |
inset | 它定义了一个 3d 插图边框。效果是根据边框颜色值生成的。 |
outset | 它定义了一个 3d 起始边界。效果是根据边框颜色值生成的。 |
<!DOCTYPE html> <html> <head> <style> p.none {border-style: none;} p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.hidden {border-style: hidden;} </style> </head> <body> <p class="none">No border.</p> <p class="dotted">A dotted border.</p> <p class="dashed">A dashed border.</p> <p class="solid">A solid border.</p> <p class="double">A double border.</p> <p class="groove">A groove border.</p> <p class="ridge">A ridge border.</p> <p class="inset">An inset border.</p> <p class="outset">An outset border.</p> <p class="hidden">A hidden border.</p> </body> </html>
输出:
无边界。
一个虚线边框。
虚线边框。
一个坚实的边界。
一个双边框。
凹槽边框。
一个山脊边界。
一个内嵌边框。
一个初始边界。
border-width 属性用于设置边框的宽度。它以像素为单位设置。您还可以使用三个预定义值之一(细、中或粗)来设置边框的宽度。
<!DOCTYPE html> <html> <head> <style> p.one { border-style: solid; border-width: 5px; } p.two { border-style: solid; border-width: medium; } p.three { border-style: solid; border-width: 1px; } </style> </head> <body> <p class="one">Write your text here.</p> <p class="two">Write your text here.</p> <p class="three">Write your text here.</p> </body> </html>
设置边框颜色的方法共有三种。
名称:它指定颜色名称。例如:“红色”。
RGB:指定颜色的RGB值。例如:“rgb(255,0,0)”。
Hex:它指定颜色的十六进制值。例如:“#ff0000”。
还有一种名为“透明”的边框颜色。如果未设置边框颜色,它将从元素的颜色属性继承。
<!DOCTYPE html> <html> <head> <style> p.one { border-style: solid; border-color: red; } p.two { border-style: solid; border-color: #98bf21; } </style> </head> <body> <p class="one">This is a solid red border</p> <p class="two">This is a solid green border</p> </body> </html>