岩岩

Appearance

边框背景色

🕒 Published at:

如果不需要圆角效果 ​

通过给盒子加上边框属性 border-image-source 和 border-image-slice实现渐变色

  • border-image-source 指定了边框的背景图片；
  • border-image-slice: 1 表示背景图片每边向内裁剪 1%，作为边框；

缺点是不能给盒子添加圆角效果

html
<style>
    .box {
        width: 100px;
        height: 100px;
        border: 4px solid;
        border-image-source: linear-gradient(to right, #E80000, #0099FF);
        border-image-slice: 1;
        margin: 300px auto;
    }
</style>

<body>
    <div class="box">

    </div>
</body>

需要圆角效果 ​

如果需要圆角效果，可以增加一层盒子，利用 background-image、background-clip、background-origin 这三个背景属性实现

  • background-image 设置元素的背景图片；
  • background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面；
  • background-origin 规定了背景图片的起始定位区域；

实现的逻辑是，linear-gradient 绘制的两个背景层，其中白色的被绘制在上方，边框透明；渐变的背景被压在下方，上方是 padding-box，下方是 border-box，所以在上方的白色背景不会延伸出去，而透明边框位置就可以让下层的渐变颜色显示出来。

html
<style>
    .border-box {
        margin: 300px auto;
        width: 100px;
        height: 100px;
        border: 4px solid transparent;
        border-radius: 16px;
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        background-image:
            linear-gradient(to right, #fff, #fff),
            linear-gradient(to right, #33CDD0, #EEF111);
    }
</style>

<body>
    <div class="border-box">
        <div class="content">测试内容</div>
    </div>
</body>

input 输入框 ​

先让原来边框透明，设置 border 的 color 为 transparent；还要加上 outline: none 这个属性，可以让原本聚焦时的轮廓消失（border 和 outline 的主要区别在于，outline 不占据空间）。其余部分就和上一个的实现方法一样了。

html
<style>
    .gradient {
        margin: 300px;
        outline: none;
        border: 2px solid transparent;
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        background-image:
            linear-gradient(90deg, #fff, #fff),
            linear-gradient(90deg, #AB804E, #F3E499, #AB804E);
    }
</style>

<body>
    <input class="gradient"></input>
</body>