CSS常见边框样式

QQ截图20200317130904.jpg

<!DOCTYPE>
  <html>
  <metacharset="utf-8">
  <head>
  <title>css常见边框样式<!DOCTYPE>
  <html>
  <metacharset="utf-8">
  <head>
  <title>css常见边框样式</title>
  <style type="text/css">
 .none {
     color: #777;
     border-bottom: 2px none #ddd;
 }
 .dotted {
     color: #777;
     border-bottom: 2px dotted #ddd;
 }
.dashed {
     color: #777;
     border-bottom: 2px dashed #ddd;
 }
 .solid {
     color: #777;
     border-bottom: 2px solid #ddd;
 }
 .double {
     color: #777;
     border-bottom: 2px double #ddd;
 }
 .groove {
      color: #777;
      border-bottom: 2px groove #ddd;
 }
 .ridge {
     color: #777;
     border-bottom: 2px ridge #ddd;
 }
 .inset {
      color: #777;
      border-bottom: 2px inset #ddd;
 }
 .outset {
     color: #777;
     border-bottom: 2px outset #ddd;
 }
 .hidden {
      color: #777;
      border-bottom: 2px hidden #ddd;
 }
  </style>
  </head>
  <body>
  <div class="none">无边框"none"</div>
  <div class="dotted">点状边框"dotted"</div>
  <div class="dashed">虚线边框"dashed"</div>
  <div class="solid">实线边框"solid"</div>
  <div class="double">双线边框"double"</div>
  <div class="groove">3D凹槽边框"groove"</div>
  <div class="ridge">3D垄状边框"ridge"</div>
  <div class="inset">3Dinset边框"inset"</div>
  <div class="outset">3Doutset边框"outset"</div>
  <div class="hidden">隐藏边框"hidden"</div>
  </body>
  </html>


-- 展开阅读全文 --