边框的三要素

最新推荐文章于 2024-08-06 18:58:51 发布

小豪boy

最新推荐文章于 2024-08-06 18:58:51 发布

阅读量439

点赞数

分类专栏： CSS3学习笔记文章标签： html5 html css

本文链接：https://blog.csdn.net/qq_34771938/article/details/120014743

版权

CSS3学习笔记专栏收录该内容

23 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中border属性的使用，包括线宽、线型和线颜色的设置，以及如何通过border-width、border-style和border-color单独定义边框属性。示例展示了实线、虚线和点状线的边框效果，并进一步讲解了如何针对四个方向设定不同的边框属性。此外，还提及了如何通过设置border为none移除边框。最后，利用边框特性制作三角形的方法被提出，展示了一个创新的应用案例。

摘要由CSDN通过智能技术生成

border属性

border属性需要三个要素。
/* 依次是线宽度、线型、线颜色 */
border: 1px solid red;

线型

线型值	意义
solid	实线
dashed	虚线
dotted	点状线

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        div {
            float: left;
            width: 100px;
            height: 100px;
            margin-right: 20px;
        }
        
        .div1 {
            border: 3px solid #000;
        }
        
        .div2 {
            border: 3px dotted #000;
        }
        
        .div3 {
            border: 3px dashed #000;
        }
    </style>
</head>

<body>
    <!-- 边框线型 -->
    <div class="div1">solid</div>
    <div class="div2">dashed</div>
    <div class="div3">dotted</div>
</body>

</html>

边框的三要素小属性

小属性	意义
border-width	线宽
border-style	线型
border-color	线颜色

四个方向的边框

属性	意义
border-top	上边框
border-right	右边框
border-bottom	下边框
border-left	左边框

四个方向边框的三要素小属性

属性	意义
border-top-width	上边框宽度
border-top-style	上边框线型
border-top-color	上边框颜色
border-right-width	右边框宽度
border-right-style	右边框线型
border-right-color	右边框颜色
border-bottom-width	下边框宽度
border-bottom-style	下边框线型
border-bottom-color	下边框颜色
border-left-width	左边框宽度
border-left-style	左边框线型
border-left-color	左边框颜色

去掉边框

border-left: none;属性即可去掉左边框，以此类推。

利用边框制作三角形

可以巧妙的利用边框的特性制作三角形。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        div {
            width: 0;
            height: 0;
            /* transparent透明色 */
            border: 100px solid transparent;
            border-top-color: red;
        }
    </style>
</head>

<body>
    <!-- 三角形 -->
    <div></div>
</body>

</html>

小豪boy

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
边框的三要素

border属性border属性需要三个要素。/* 依次是线宽度、线型、线颜色 */border: 1px solid red;线型线型值意义 solid 实线 dashed 虚线 dotted 点状线边框的三要素小属性四个方向的边框四个方向边框的三要素小属性属性意义 border-top-width 上边框宽度 border-top-style 上边框线型 border-top-color
复制链接

扫一扫

专栏目录