前端必会的 HTML+CSS 常用技巧之边框渐变色的实现方式

最新推荐文章于 2024-06-20 16:13:28 发布

zhuangv

最新推荐文章于 2024-06-20 16:13:28 发布

阅读量1.8k

点赞数 3

分类专栏： HTML + CSS 文章标签： html css css3 html5

本文链接：https://blog.csdn.net/Zhuangvi/article/details/104733981

版权

HTML + CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

边框渐变色的实现方式

话不多说，今天我们就来简单的聊一下关于边框渐变色的实现方式。

第一种：利用border-image

因为 gradient 属于 image 类型，所以它可以用于任何适用于 image 的地方。正是因为这样，radial-gradient() 能用于此。
很多人在移动端注册页面的时候常常会碰到类似以下的图片：边框渐变1
那么，在这里我们需要怎么实现上图的效果呢？介绍个相对简单的办法给大家：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        fieldset{
            width: 600px;
            height: 300px;
            margin:100px auto;
            border: none;
            border-top: 5px solid transparent;
            border-image: -webkit-radial-gradient(red,transparent) 1 10;
        }
        legend{
            font-size: 30px;
            font-weight: bold;
            text-align: center;
        }
    </style>
</head>
<body>
    <form action="">
        <fieldset>
            <legend>其他注册方式</legend>
        </fieldset>
    </form>
</body>

fieldset 标签是表单字段集，自带边框；legend是表单字段集标题，一般放在fieldset第一个子元素的位置，且是在边框里面的。这个方法呢是利用的图片边框border-image属性，border-image是一个简写属性，用于设置以下属性：border-image-source 图片边框的路径，border-image-slice 图片边框向内偏移，border-image-width 图片边框的宽度，border-image-outset 图片边框区域超出边框的量，border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。在这里我们是把径向渐变属性radial-gradient加入border-image简写属性里面从而达到这种效果。

扩展此方法还可实现如下效果：
边框渐变色2
代码如下：

<style>
        div{
            width: 600px;
            height: 100px;
            margin: 100px auto;
            font-size:50px;
            text-align: center;
            line-height: 100px;
            border:10px transparent solid;
            border-image:-webkit-linear-gradient(left,red,blue) 1 10;
         }
</style>
<body>
    <div>边框渐变色</div>
</body>

那么有小伙伴就要问了如果我要实现圆角的边框渐变色也可以用这种办法吗？答案是不行的，border-image的使用是不能实现圆角的效果的。

第二种：利用伪类：after{} 选择器

效果图如下：
边框渐变色3
代码如下：

<style>
        div{
            width: 600px;
            height: 100px;
            margin: 100px auto;
            background: #fff;
            font-size: 50px;
            text-align: center;
            line-height: 100px;           
            border: 10px transparent solid;
            border-radius:30px;
            position: relative;
	     }
	     div:after{
	        content:'.';
	        position: absolute;
	        top: -20px; bottom: -20px;
	        left: -20px; right: -20px;
	        background: -webkit-linear-gradient(left,red, blue);
	        border-radius: 40px;
	        z-index: -1;
	     }
</style>
<body>
    <div>圆角边框渐变色</div>
</body>

这里呢利用的是伪类选择器：after{}。重点在于z-index：-1，z-index 属性设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

第三种：利用嵌套

效果图如下：
边框渐变色4
代码如下：

<style>
        .box{
            width: 600px;
            height: 100px;
            background: -webkit-linear-gradient(left,red, blue);         
            border-radius:40px;
            margin: 100px auto;
            display: flex;
        }
        .box1{
            width: 580px;
            height: 80px;
            margin: auto;
            background: #fff;
            font-size: 50px;
            text-align: center;
            line-height: 80px; 
            border-radius:30px;
        }
</style>
<body>
    <div class="box">
        <div class="box1">圆角边框渐变色</div>
    </div>
</body>

这个的原理就相对简单点，直接嵌套一个元素，让子元素在父容器上下左右居中即可！

以上就是本人对边框渐变色的简单理解，如有不足之处，望诸位大神们不吝赐教，谢谢！

zhuangv

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端必会的 HTML+CSS 常用技巧之边框渐变色的实现方式

话不多说，今天我们就来简单的聊一下关于边框渐变色的实现方式。第一种：利用border-image因为 gradient 属于 image 类型，所以它可以用于任何适用于 image 的地方。正是因为这样，radial-gradient() 能用于此。很多人在移动端注册页面的时候常常会碰到类似以下的图片：那么，在这里我们需要怎么实现上图的效果呢？介绍个相对简单的办法给大家：<head...
复制链接

扫一扫