CSS学习笔记5：边框样式

最新推荐文章于 2025-04-11 09:32:51 发布

提辖鲁

最新推荐文章于 2025-04-11 09:32:51 发布

阅读量197

点赞数

CC 4.0 BY-SA版权

分类专栏： Web # CSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/lj402159806/article/details/122481835

Web 同时被 2 个专栏收录

37 篇文章

订阅专栏

CSS

13 篇文章

订阅专栏

本文介绍了HTML中CSS边框样式的设置方法，包括整体样式和局部样式的应用实例。通过不同属性如宽度、颜色和风格的组合，展示了如何实现虚线、实线等效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

整体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>整体样式</title>
    <!--border-width	边框的宽度-->
    <!--    取值一般为px-->
    <!--border-style	边框的外观-->
    <!--    none	无样式-->
    <!--    dashed	虚线-->
    <!--    solid	实线-->
    <!--border-color	边框的颜色-->
    <!--    取值为关键字或16进制RGB值-->
    <style>
        div {
            width: 100px;
            height: 30px;
        }

        #div1 {
            border-width: 1px;
            border-style: dashed;
            border-color: red;
        }

        #div2 {
            border-width: 1px;
            border-style: solid;
            border-color: red;
        }

        img {
            width: 150px;
            height: 150px;
            border-width: 2px;
            border-style: solid;
            border-color: red;
        }

        /*简写形式*/
        #div3 {
            border: 1px solid red;
        }

    </style>
</head>
<body>
<div id="div1"></div>
<br/>
<div id="div2"></div>
<br/>
<img src="https://p92.com/binaries/content/gallery/p92website/technologies/htmlcssjs-overview.png" alt="海贼王之索隆">
<div id="div3">边框样式简写</div>
</body>
</html>

在这里插入图片描述

局部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>局部样式</title>
    <style>
        #div1 {
            width: 100px;
            height: 60px;
            border-left: 2px solid green;
            border-top: 2px solid red;
            border-right: 2px solid yellow;
            border-bottom: 2px solid blue;
        }

        #div2 {
            width: 100px;
            height: 60px;
            border: 1px solid red;
            /*去除某一条边框*/
            border-bottom: 0px;
        }
    </style>
</head>
<body>
<div id="div1"></div>
<br/>
<div id="div2"></div>
</body>
</html>

在这里插入图片描述