CSS边框技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/xjj19999272/article/details/117077477

四个方向的边框

四个方向的边框属性

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

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

四个方向边框也可以写成三要素小属性，以右边框为例示例如下：

属性	意义
border-right-width	右边框宽度
border-right-style	右边框线型
border-right-color	右边框颜色

示例代码如下：

<!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: 150px;
            height: 150px;
            border: 10px solid #000;
            margin-bottom: 20px;
        }
        .box1 {
            border-top-style: solid;
            border-top-color: red;
        }
        .box2 {
            border-right-style: dotted;
            border-right-color: blue;
        }
        .box3 {
            border-bottom-style: dashed;
            border-bottom-color: green;
        }
        .box4 {
            border-left-style: solid;
            border-left-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>
</html>

网页效果如下：

在这里插入图片描述

在上面代码中使用四个方向边框的三要素小属性分别设置了四个盒子的上下左右四个边框的值。

去掉边框

border-right: none;属性即可去掉左边框，以此类推，示例如下：

<style>
    div {
        width: 200px;
        height: 200px;
        border: 10px solid red;
        border-right: none;
    }
</style>

网页效果如下：
在这里插入图片描述

利用边框制作三角形

可以巧妙的利用边框的特性制作三角形，设置宽高为0px即可，示例代码如下：

<style>
    div {
        width: 0px;
        height: 0px;
        /* 设置颜色为透明色，transparent是透明色 */
        border: 50px solid transparent;
        border-bottom-color: red;
    }
</style>