话不多说,今天我们就来简单的聊一下关于边框渐变色的实现方式。
第一种:利用border-image
因为 gradient 属于 image 类型,所以它可以用于任何适用于 image 的地方。正是因为这样,radial-gradient() 能用于此。
很多人在移动端注册页面的时候常常会碰到类似以下的图片:
那么,在这里我们需要怎么实现上图的效果呢?介绍个相对简单的办法给大家:
<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简写属性里面从而达到这种效果。
扩展此方法还可实现如下效果:
代码如下:
<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{} 选择器
效果图如下:
代码如下:
<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 属性设置元素的堆叠顺序,拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
第三种:利用嵌套
效果图如下:
代码如下:
<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>
这个的原理就相对简单点,直接嵌套一个元素,让子元素在父容器上下左右居中即可 !
以上就是本人对边框渐变色的简单理解,如有不足之处,望诸位大神们不吝赐教,谢谢 !