css怎样实现丰富的边框效果？教你四个技巧

发布时间：2022-01-14 13:44 所属栏目：13 来源：互联网

导读：

导读：今天给大家分享的是关于css边框的内容，在CSS中，我们可以使用border来实现边框效果，但是一般的边框是黑边直线的，这样有些单调，其实边框也是有很多丰富的样式的，因此这篇文章就给大家分享几个实现好看的CSS边框的技巧，感兴趣的朋友可以参考。一、多重

今天给大家分享的是关于css边框的内容，在CSS中，我们可以使用border来实现边框效果，但是一般的边框是黑边直线的，这样有些单调，其实边框也是有很多丰富的样式的，因此这篇文章就给大家分享几个实现好看的CSS边框的技巧，感兴趣的朋友可以参考。

    一、多重边框[1]
    背景知识：box-shadow，outline
    鉴于使用场景的多元化，多重边框的设计越来越多，以往可以借助 border-image 属性应付一下，但是这个在css 代码层面并不是很灵活。现在我们借助 box-shadow 和 outline 两个属性来分别实现多重边框。

    1、box-shadow 方案
    思路：利用 box-shadow 的第四个参数（扩张半径）的大小，多重投影
    代码示例：

  <div class="border-multiple">
        多重边框实现方案一：box-shadow
    </div>

    .border-multiple {
        margin: 50px auto;
        padding: 20px;
        width: 600px;
        background-color: #fff;
        box-shadow: 0 0 0 10px #f0f,
                    0 0 0 15px #00f,
                    0 2px 15px 15px rgba( 0, 0, 0, .8);
    }

多重边框--box-shadow

    小结：

    1、阴影并不影响布局，也不会受到box-sizing的影响
    2、支持逗号分隔语法，可以创建任意数量的投影
    3、缺点：只能实现实线的边框，不能实现其他样式的边框

    2、outline 方案
    代码示例：

  <div class="border-outline">
        多重边框实现方案二：outline
    </div>
    .border-outline {
        margin: 200px auto;
        padding: 20px;
        width: 600px;
        background-color: #ff0;
        outline: 3px dashed #0f0;
        outline-offset: -10px;
    }

多重边框–outline

    小结:

    1、前提是实现两层边框
    2、可能需要 outline-offset 的属性值
    3、outline 的描边默认是矩形，当有圆角时会认为是 bug , 不能贴合圆角
    4、不支持逗号语法

    二、边框内圆角[2]
    背景知识：box-shadow，outline
    为了解决上面例子小结3中的bug，可以用box-shadow 扩张半径来填补掉圆角与outline 之间的空隙。
    代码示例：

  <div class="inner-rounding">
         需要借助 box-shadow、outline、“多重边框”来实现
         注意点： box-shadow 的扩展半径应该是圆角半径的 0.5倍
    </div>
    .inner-rounding {
        background-color: #ccc;
        margin: 50px auto;
        padding: 20px;
        width: 600px;
        padding: 20px;
        border-radius: 20px;
        box-shadow: 0 0 0 10px #f00;
        outline: 10px solid #f00;
    }
    注意点： box-shadow 的扩展半径应该是圆角半径的 0.5倍；严格来说应该是(√2 - 1) 倍，这里取 0.5 倍是为了更好的计算

边框内圆角

    三、半透明边框[3]
    背景知识：rgba 或 hsla 颜色属性，background-clip
    思路：让边框呈现在被裁剪背景的 padding-box 里
    代码示例：

   <div class="border-opacity">
         半透明边框的实现
    </div>
    .border-opacity {
        margin: 50px auto;
        padding: 20px;
        width: 600px;
        border: 10px solid hsla(0, 0%, 100%, 0.5);
        background-color: #fff;
        background-clip: padding-box;
    }

（编辑：ASP站长网）