CSS边框(Border)样式和特性详细解析

CSS边框(Border)样式和特性详细解析 第一张

CSS边框(Border)样式和特性

CSS边框(Border)是CSS中的一个重要组成部分,可以让我们给元素添加边框,以达到美化网页的目的。CSS边框(Border)有四个属性:border-style,border-width,border-color和border-radius。

border-style

border-style属性用来指定边框的样式,可选值有solid,dashed,dotted,double,groove,ridge,inset,outset,hidden,inherit等,其中solid为实线,dashed为虚线,dotted为点状线,double为双线,groove为沟槽线,ridge为脊线,inset为内凹线,outset为外凸线,hidden为隐藏线,inherit为继承父元素的边框样式。

border-style: solid;
border-style: dashed;
border-style: dotted;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;
border-style: hidden;
border-style: inherit;

border-width

border-width属性用来指定边框的宽度,可选值有thin,medium,thick,px,em,%,in,cm,mm,pt等,其中thin为较细的宽度,medium为中等宽度,thick为较粗的宽度,px为像素,em为em单位,%为百分比,in为英寸,cm为厘米,mm为毫米,pt为磅。

border-width: thin;
border-width: medium;
border-width: thick;
border-width: 10px;
border-width: 3em;
border-width: 5%;
border-width: 2in;
border-width: 4cm;
border-width: 6mm;
border-width: 8pt;

border-color

border-color属性用来指定边框的颜色,可选值有rgb,rgba,hsl,hsla,#,transparent,inherit等,其中rgb为RGB颜色,rgba为RGBA颜色,hsl为HSL颜色,hsla为HSLA颜色,#为十六进制颜色,transparent为透明色,inherit为继承父元素的边框颜色。

border-color: rgb(255, 0, 0);
border-color: rgba(0, 0, 255, 0.5);
border-color: hsl(240, 100%, 50%);
border-color: hsla(180, 100%, 50%, 0.5);
border-color: #000000;
border-color: transparent;
border-color: inherit;

border-radius

border-radius属性用来指定边框的圆角大小,可选值有px,em,%,in,cm,mm,pt等,其中px为像素,em为em单位,%为百分比,in为英寸,cm为厘米,mm为毫米,pt为磅。

border-radius: 10px;
border-radius: 3em;
border-radius: 5%;
border-radius: 2in;
border-radius: 4cm;
border-radius: 6mm;
border-radius: 8pt;

使用方法

使用CSS边框(Border)样式和特性,可以通过指定border-style,border-width,border-color和border-radius属性来设置边框的样式和特性,例如:

div {
    border-style: solid;
    border-width: 10px;
    border-color: #000000;
    border-radius: 5%;
}

上面的代码设置了div元素的边框样式为实线,宽度为10px,颜色为黑色,圆角大小为5%。

© 版权声明
THE END
分享