border渐变,css边框渐变

前端经常会用到渐变背景,如果总是用图片,显得自己很不专业,对于背景渐变很多人都会,也经常用,那么今天七娃总结一个 border边框的渐变实现方法:

border: 2px solid;
border-image: -webkit-linear-gradient( red, blue) 30 30;
border-image: -moz-linear-gradient( red, blue) 30 30;
border-image: linear-gradient( red, blue) 30 30;

效果如下:

解释:首先设置边框border有宽度,和线条类型,这里七娃用的是实线solid,你们也可以用虚线测试一下;然后通过边框背景border-image进行渐变填充,我们来看一下border-image的属性:

border-image: source slice width outset repeat|initial|inherit;
border-image-source 用于指定要用于绘制边框的图像的位置
border-image-slice 图像边界向内偏移
border-image-width 图像边界的宽度
border-image-outset 用于指定在边框外部绘制 border-image-area 的量
border-image-repeat 用于设置图像边界是否应重复(repeat)、拉伸(stretch)或铺满(round)。

以下为“菜鸟教程”的例子:

赞(0) 打赏
未经允许不得转载:版权所有@七娃设计室七娃博客 » border渐变,css边框渐变
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

七娃设计,让设计贴近生活

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏