css基础实例3-实现盒子的边框

逃离我推掉我的手 2022-11-04 13:26 49阅读 0赞

要求：  
![在这里插入图片描述][2021030221220712.png]  
代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>实现盒子</title>
        <style>
            div{
         
                width: 200px;
                height: 200px;
                border-top: 5px solid red;
                border-bottom: 5px solid blue;
                border-left: 5px solid blue;
                border-right: 5px solid blue;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    </html>

效果如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MzUzOTYz_size_16_color_FFFFFF_t_70]

[2021030221220712.png]: /images/20221023/5bd482f5b0ab41fab2586ccd26c9f9f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MzUzOTYz_size_16_color_FFFFFF_t_70]: /images/20221023/caa996cbab1d4044a96e8e5fc0b33357.png

发表评论取消回复

表情：

评论列表（有 0 条评论，49人围观）

还没有评论，来说两句吧...

相关阅读

相关 css边框圆角(css边框圆角实例)

用CSS制作边框圆角线 css没有这个功能，只有用背景图来实现 ![css边框圆角(css边框圆角实例)\_css边框圆角(css边框圆角实例)][css_css_cs

不念不忘少年蓝@/ 2023年09月26日 13:14/ 0 赞/ 116 阅读

相关 CSS3-盒子阴影

CSS3 新增了 `box-shadow` 样式属性用来给元素设置一个或多个下拉阴影的框；该属性可以设置多个属性值语法： box-shadow: h-shadow

分手后的思念是犯贱/ 2023年06月02日 09:15/ 0 赞/ 94 阅读

相关 css基础实例3-实现盒子的边框

要求： ![在这里插入图片描述][2021030221220712.png] 代码如下： <!DOCTYPE html> <html lang="en

逃离我推掉我的手/ 2022年11月04日 13:26/ 0 赞/ 50 阅读

相关前端基础——CSS盒子模型

现在许多网页都是由许多个“盒子”拼接、嵌套而成，所以多少接触过网页设计的朋友一定都对CSS盒子模型有所了解。为了更好的说明，先举个通俗的例子：在一个仓库中放了

女爷i/ 2022年08月13日 12:40/ 0 赞/ 167 阅读

相关 CSS开发基础——CSS盒子模型

1、CSS的盒子模型 ![CSS盒子模型][CSS] height：高度 width：宽度 padding：内边距 margin：外边距

朱雀/ 2022年07月13日 15:26/ 0 赞/ 150 阅读

相关 css盒子模型之边框（border）

先把盒子模型示意图放上： ![这里写图片描述][SouthEast] 知识点一：哪里是边框，使用什么属性控制？元素的边框 (border) 是围绕元素内容和内

雨点打透心脏的1/2处/ 2022年06月17日 12:11/ 0 赞/ 243 阅读

相关 css的字体设置，css的盒子模型，css的盒子模型的边框，盒子模型的内边距属性，盒子模型的外边距属性，

10 字体 Fond-size：100px；设置字体的大小 color：red；设置字体的颜色 11 CSS盒子模型：所有的html元素都是一个四边形，即一个盒子。

阳光穿透心脏的1/2处/ 2022年06月06日 03:07/ 0 赞/ 246 阅读

相关 CSS基础（三）：w3c盒子模型和ie盒子模型

盒子模型，英文即box model。无论是div、span、还是a都是盒子。但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西

深藏阁楼爱情的钟/ 2022年05月24日 12:50/ 0 赞/ 186 阅读

相关 Css3圆角边框

1行代码搞定CSS3的圆角。 webkit核心浏览器使用-webkit-border-radius，如-webkit-border-radius:10px; fire

待我称王封你为后i/ 2022年04月14日 06:07/ 0 赞/ 318 阅读

相关【CSS3】边框

CSS3 边框用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如 Photoshop。在本章中，您将了解以下的边框属性： ![

桃扇骨/ 2022年03月21日 14:46/ 0 赞/ 236 阅读