DIV边框样式实线点线虚线双线凹槽凸槽

2024-10-21 14:26:47

1、无边框样式：这里我们来建一个100px,100px的边框，背景颜色为黄色，没有边框样式，具体的代码如下：<html> <head> <title>CSS边框样式</title> <style type="text/css"> #contion{ height:100px; width:100px; border-style:none; } </style> </head> <body> <div id="contion"> 我是div </div> </body></html>可以看到如下图执行的效果图，没有显示边框所显示的信息。

3、点线：这里设置div的框线样式为点线，框线的颜色为红色，框线的宽度为3px，具体的代码如下：<html> <head> <title>CSS边框样式</title> <style type="text/css"> #contion{ height:100px; width:100px; border-style:dotted; border-color:red; border-width:3px; background-color:yellow; } </style> </head> <body> <div id="contion"> 我是div </div> </body></html>可以看到如下图的效果。

5、双实线：这里我来设置div的框线为双实线，颜色为红色，宽度为三个像素，具体的代码如下：<html> <head> 艘早祓胂 <title>CSS边框样式</title> <style type="text/css"> #contion{ height:100px; width:100px; border-style:double; border-color:red; border-width:3px; background-color:yellow; } </style> </head> <body> <div id="contion"> 我是div </div> </body></html>如下图所示的效果，可以看到框线变成了双实线了。

7、凸槽：设置div的丸泸尺鸢框线的样式为凹槽，框线的颜色为红色，框线的宽度为10px，具体的代码如下：<html&爿讥旌护gt; <head> <title>CSS边框样式</title> <style type="text/css"> #contion{ height:100px; width:100px; border-style:ridge; border-color:red; border-width:10px; background-color:yellow; } </style> </head> <body> <div id="contion"> 我是div </div> </body></html>如下图，可以看到外边框凸槽的具体样式了。