一天搞定CSS：边框border--02

最新推荐文章于 2025-06-23 21:07:09 发布

Java仗剑走天涯

最新推荐文章于 2025-06-23 21:07:09 发布

阅读量615

点赞数

CC 4.0 BY-SA版权

分类专栏：前端基础HTML5/CSS3 文章标签： css border 边框

本文链接：https://blog.csdn.net/baidu_37107022/article/details/71250059

前端基础HTML5/CSS3 专栏收录该内容

46 篇文章

订阅专栏

每一个标签都是一个盒子，具体见HTML教程

因此，每一个标签有大小，有边框

1.border样式：单一样式

这里写图片描述

2.border样式：复合样式

border: 粗细类型颜色；

这里写图片描述

3.border方向

一天搞定CSS：初识css--01

4.代码演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width: 300px;
                height: 300px;

                /*单一样式*/
                border-color: red;
                border-width: 4px;
                border-style: solid;

                /*复合样式*/
                border: 4px solid red;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

边框方向：以top为例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width: 300px;
                height: 300px;

                /*单一样式*/
                border-top-color: red;
                border-top-width: 4px;
                border-top-style: solid;

                /*复合样式*/
                border-top: 4px solid red;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>