版权声明:本文为博主原创文章,未经博主允许不得转载。 文章底部留言可联系作者。
一、效果
首先可以看一下下图显示的实现效果:
- 底部边框,左侧渐变效果
- 右侧边框,上下都有一个渐变的效果
点击查看demo代码
二、实现
1. linear-gradient
首先我们先了解一下css中的线性渐变属性 linear-gradient。linear-gradient()
函数用于创建一个表示两种或多种颜色线性渐变的图片。
创建线性渐变,需要设置一个起始点和方向(或角度),还要定义终止色,以及两者之间的可选色(可以有多个)。
1)默认从上到下渐变
从红色到黄色的一个渐变:
background-image:linear-gradient(red,yellow) ;
复制代码
下面是一个多色的渐变效果
background: linear-gradient(#3f87a6, #ebf8e1, #f69d3c);
复制代码
2)改变渐变方向
-
可以通过
top bottom left right
来指定上下左右,linear-gradient(to结束的方向,red,yellow);
向右侧方向渐变:
background-image:linear-gradient(to right,#3f87a6, #ebf8e1, #f69d3c); 复制代码
-
通过角度渐变:
linear-gradient(角度,red,blue);
向45度方向渐变:background-image:linear-gradient(45deg,#3f87a6, #ebf8e1, #f69d3c); 复制代码
3)颜色节点分布的渐变
下图是起始点到10%的位置标蓝色,10%到30% 蓝到白的渐变,30%到70%为白到橘的渐变,从70%到结束标记橘色
background-image:linear-gradient(90deg,#3f87a6 10%, #ebf8e1 30%, #f69d3c 70%)
复制代码
4)重复渐变
repeating-linear-gradient()
创建一个在直线上重复前进的渐变。随着渐变的重复,颜色再次循环。在这种情况下,梯度线是100px长。
background: repeating-linear-gradient(90deg,#3f87a6,#ebf8e1 100px);
复制代码
2.border-image
CSS属性允许在元素的边框上绘制图像,在使用border-image
时,其将会替换掉 border-style 属性所设置的边框样式。
可以看张鑫旭大大写的这个文章《CSS3 border-image详解、应用及jQuery插件》 把border-image写的很清楚啦。
这里就捡重要的简单说明:
border-image的参数有三个:图片,剪裁位置,重复性.
1)图片(border-image-source)
border-image
的背景图使用url()
调用,图片可以是相对路径或是绝对路径,也可以不使用图片,即border-image:none;
。
我们要实现的效果呢,我们用到的 linear-gradient
来创建一个线性渐变图片来显示。
2)图片裁剪位置(border-image-slice)
border-image:url(border.png) 27 repeat;
这里的27专指27像素。
“30% 35% 40% 30%”的示意可以用下图表示:
- 离图片上部30%的地方剪裁一下
- 在右边35%的地方剪裁一下
- 在离底部40%的地方裁剪一下
- 在距左边30%的地方也剪裁一下 于是总共对图片进行了“四刀切”,形成了九个分离的区域,这就是九宫格
3)重复性(border-image-repeat)
图像边界是否 repeat(重复)、round(平铺)和stretch(拉伸)。其中,stretch是默认值。
参数有0~2个:
- 0个参数,则使用默认值 stretch。
- 1个参数,表示水平方向及垂直方向均使用此参数
- 2个参数,第一个参数表水平方向,第二个参数表示垂直方向
上面看到图片被分割成9宫格,在执行重复性时,被填充至边框九宫格四个角落的的边框图片是不执行重复属性的。
上下的九宫格执行水平方向的重复属性(拉伸或平铺),左右的格子执行垂直方向的重复属性(拉伸或平铺),而中间的那个格子则水平重复和垂直方向的重复都要执行。可以参考下图:
3.最终效果
通过上面两个属性的学习,接下来我们就可以实现我们想要的效果了
1)底部边框渐变
/*首先我们设置边框只显示底部,宽度为2px的实线。*/
border-bottom: 2px solid;
/*设置线性渐变*/
border-image: linear-gradient(90deg, rgba(0, 216, 247, 0) 0%, #00afed 100%) 2 2 2 2;
复制代码
- 首先我们看一下线性渐变的效果图:从左到右,由透明开始向蓝色渐变
background: linear-gradient(90deg, rgba(0, 216, 247, 0) 0%, #00afed 100%)
复制代码
- 然后我们通过
border-image
设置(2 2 2 2
)对图片做了裁剪,得到了下图这样的9宫格。如果不设置重复性(border-image-repeat
)默认值是stretch(拉伸)
,则会进行如下显示的拉伸。
- 因为只显示border-bottom,所以只有最下面的一边生效。如下图:
2)右侧边框两端渐变
/*首先我们设置边框只显示右侧,宽度为2px的实线。*/
border-right: 2px solid;
/*设置线性渐变*/
border-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #00bbf2 20%, rgba(255, 255, 255, 0) 99%) 2 2 2 2;
复制代码
- 我们看一下线性渐变的效果图: 从上到下,从起始开始,透明向蓝色渐变到20%的位置,然后又向透明进行渐变到99%的位置,99%到结束是透明
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #00bbf2 20%, rgba(255, 255, 255, 0) 99%);
复制代码
- 和上面同理,我们通过
border-image
设置(2 2 2 2
)对图片做了裁剪,得到了下图这样的9宫格。如果不设置重复性(border-image-repeat
)默认值是stretch(拉伸)
,则会进行如下显示的拉伸。
- 因为只显示border-right,所以只有右边边框生效。如下图: