边框设置渐变色和圆角的问题

孙俊熙

已于 2023-03-14 18:39:53 修改

阅读量5.8k

点赞数 13

分类专栏：前端文章标签：前端 html css

于 2022-11-24 18:44:52 首次发布

本文链接：https://blog.csdn.net/huihui_999/article/details/128023471

版权

前端专栏收录该内容

149 篇文章 4 订阅

订阅专栏

首先说明一点，渐变色border-image的设置和圆角的设置 border-radius是不能共同存在的，如果共同存在的话，那么只有渐变色会生效，圆角则显示不出来。我列举几个例子顺带解决一下我在项目中遇到的问题。

1.实例1：

<!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>Document</title>
    <style>
        .border-image-clip-path {
          width: 200px;
          height: 100px;
          margin: auto;
          border: 8px solid;
          border-image: linear-gradient(45deg, gold, deeppink) 1;
          clip-path: inset(0px round 10px);
          animation: huerotate 6s infinite linear;
          filter: hue-rotate(360deg);
        }
        @keyframes huerotate {
          0% {
            filter: hue-rotate(0deg);
          }
          100% {
            filter: hue-rorate(360deg);
          }
        }
        
        </style>
</head>
<body>
    <h1 class="border-image-clip-path"></h1>
</body>
</html>

这个渐变色设置的比较好，还有一定动画效果，同时呢，也设置了圆角。

效果大概是这样的，因为只是展示一张静态的：

2.实例2：

这个是用伪元素来处理的：

<!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>Document</title>
    <style type="text/css">
        a {
            position: relative;
            display: inline-block;
            font-size: 14px;
            color: #a81c2e;
            border: 1px solid;
            border-radius: 10px;
            padding: 15px 40px;
        }
        
        a:before {
            position: absolute;
            width: 98%;
            height: 100%;
            content: '';
            display: block;
            border: 1px solid;
            border-image: linear-gradient(to right, #9f1a2c, #012069);
            -webkit-border-image: linear-gradient(to right, #9f1a2c, #012069);
            -o-border-image: linear-gradient(to right, #9f1a2c, #012069);
            border-image-slice: 10%;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <a>渐变色</a>
</body>
</html>

效果看一下：

3.实例3：

<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>Document</title>
</head>
<style>
       .boxWarp {
            width:200px;
            height: 200px;
            margin: auto;
            padding: 2px;
            border-radius: 10px;
            background-image:  linear-gradient(45deg, #0083e8, #051d46, #0083e8);
            background-clip: content-box, padding-box;
       
        }
</style>
<body >
    <div class="boxWarp"></div>
</body>
</html>

这个也是一种方法，看一下效果：

4.实例4：

<!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>Document</title>
    <style>
        .roadline-box {
            width: 200px;
            height: 200px;
            background: linear-gradient(to right, #E7C737, #28B35B);
            padding: 1px;
            border-radius: 20px;
        }

        .box-inner {
            width: 200px;
            height: 200px;
            border-radius: 20px;
            background: #ffffff;
        }
    </style>
</head>

<body>
    <div class="roadline-box">
        <div class=".box-inner  "></div>
    </div>
</body>

</html>

看一下效果：

实例3和实例4有个共同的缺点，如果要求背景色是透明色，那就不能行了。

5.实例5：

<!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>使用border-image + clip-path</title>
    <style>
        .border-image-clip-path {
            position: relative;
            width: 200px;
            height: 100px;
            border: 3px solid;
            border-image: linear-gradient(45deg, gold, deeppink) 1;
            clip-path: inset(0 round 10px);//裁剪
        }
    </style>
</head>

<body>
    <div class="border-image-clip-path"></div>
</body>

</html>

看一下效果：

最后再补充一种比较好的渐变边框效果图：

<!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>Document</title>
    <style>
        .border {
            width: 300px;
            height: 300px;
            border-radius: 20px;
            margin: auto;
            box-sizing: border-box;
            border: 1px solid transparent;
            background-image: linear-gradient(#fff, #fff),
                linear-gradient(to bottom left,
                    rgba(255, 216, 64, 1),
                    rgba(243, 172, 255, 1),
                    rgba(138, 236, 255, 1));
            background-origin: border-box;
            background-clip: content-box, border-box;
            border-radius: 20px;
        }
    </style>
</head>

<body>
    <div class="border"></div>
</body>

</html>

效果图：