html正方形边框，详解HTML设置边框的三种方式（html画方框用border）

1、正方形边框[分别是上---左右---下边框设置]2、正方形边框[分别是上下---左右边框设置]3、正方形边框[边框的粗细、边框样式、边框颜色]4、正方形边框[分别是上---右---左---下边框设置]

郝晨妤

10780人浏览 · 2022-09-02 11:42:55

郝晨妤 · 2022-09-02 11:42:55 发布

代码如下

<!DOCTYPE html>
<html>
   <head>
       <style>
           .square{
               border-width: 2px 2px 2px;
               border-style: solid dashed dotted;
               border-color: red green blue;
           }
           .square1{
               border-width:1px 2px;
               border-style:solid dashed;
               border-color: red blue;
           }
           .square2{
               border:1px solid #fff;
           }
           .square3{
               border-width: 2px 2px 2px 2px;
               border-style: solid dashed dotted solid;
               border-color: red green blue pink;
           }
       </style>
       <meta charset="utf-8">
       <title>正方形边框</title>
   </head>
   <body>
       <div class="square">
           1、正方形边框[分别是上---左右---下边框设置]
       </div>
       <div class="square1">
           2、正方形边框[分别是上下---左右边框设置]
       </div>
       <div class="square2">
           3、正方形边框[边框的粗细、边框样式、边框颜色]
       </div>
       <div class="square3">
           4、正方形边框[分别是上---右---左---下边框设置]
       </div>
   </body>
</html>