DIV边框样式实线点线虚线双线凹槽凸槽
的有关信息介绍如下:我们可以给DIV设置边框,也可以给div设置边框样式,比如说设置实线的边框样式,还有需要的边框样式,双实线的边框员工是,凸槽凹槽的边框样式等等。
无边框样式:这里我们来建一个100px,100px的边框,背景颜色为黄色,没有边框样式,具体的代码如下:
#contion{
height:100px;
width:100px;
border-style:none;
}
我是div
可以看到如下图执行的效果图,没有显示边框所显示的信息。
实线:这里给边框设置实线的样式,边框线颜色为红丝,宽度为一个像素具体的代码如下:
#contion{
height:100px;
width:100px;
border-style:solid;
border-color:red;
border-width:1px;
background-color:yellow;
}
我是div
如下图看到了一个红色的框线,实线了实线框线的功能。
点线:这里设置div的框线样式为点线,框线的颜色为红色,框线的宽度为3px,具体的代码如下:
#contion{
height:100px;
width:100px;
border-style:dotted;
border-color:red;
border-width:3px;
background-color:yellow;
}
我是div
可以看到如下图的效果。
虚线:设置框线样式为虚线,框线颜色为红色,框线宽度为3px,具体的代码如下所示:
#contion{
height:100px;
width:100px;
border-style:dashed;
border-color:red;
border-width:3px;
background-color:yellow;
}
我是div
具体的执行效果如下图所示,框线变成了虚线。
双实线:这里我来设置div的框线为双实线,颜色为红色,宽度为三个像素,具体的代码如下:
#contion{
height:100px;
width:100px;
border-style:double;
border-color:red;
border-width:3px;
background-color:yellow;
}
我是div
如下图所示的效果,可以看到框线变成了双实线了。
凹槽:这里设置div的框线样式为凹槽,框线的颜色为红色,框线的宽度为10px,具体的代码如下:
#contion{
height:100px;
width:100px;
border-style:groove;
border-color:red;
border-width:10px;
background-color:yellow;
}
我是div
如下图,可以看到现在div的外框像一个相框的样式了。
凸槽:设置div的框线的样式为凹槽,框线的颜色为红色,框线的宽度为10px,具体的代码如下:
#contion{
height:100px;
width:100px;
border-style:ridge;
border-color:red;
border-width:10px;
background-color:yellow;
}
我是div
如下图,可以看到外边框凸槽的具体样式了。