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

最新推荐文章于 2024-03-19 00:00:51 发布

郝晨妤

最新推荐文章于 2024-03-19 00:00:51 发布

阅读量1w

点赞数 4

分类专栏：前端 css vue新手文章标签： html 前端 css vue html5

本文链接：https://blog.csdn.net/H1453571548/article/details/126659545

版权

css 同时被 3 个专栏收录

18 篇文章 1 订阅

订阅专栏

vue新手

18 篇文章 1 订阅

订阅专栏

前端

15 篇文章 0 订阅

订阅专栏

代码如下

<!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>

试图如下

郝晨妤

关注

4
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
2
评论
html正方形边框，详解HTML设置边框的三种方式（html画方框用border）

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

扫一扫