最近设计师的风格发生突变,一句话概括就是,能用渐变的地方绝对不用纯色。这不,就整出了一个渐变圆角边框。这渐变好做,圆角好做,渐变圆角也没问题,可是在加个边框还是有点坑的。没办法,看看怎么实现吧

border-image 缺陷不支持圆角

首先想到的是 border-image 的实现方式,用一个渐变作为 border-image:


border-image-source: linear-gradient(to right,#08fdd8,#F58549, red);

然而使用完 border-image 之后,border-radius 是无效的,达不到圆角的效果。

See the Pen gradient border button by Orzoon_Kunwar
(@orzoon) on CodePen.

你可能想到了借助 clip-path,但是 clip-path 只能切出外边的圆角,见下图:

background-image/background-clip

那么难道就没办法了吗?不,只要思想不滑坡,办法总比困难多~,借助上面标题中的两位,我们可以完美实现这个效果。background-image 大家应该都不陌生,那么 background-clip 又是个什么东东呢?

众所周知,盒模型中的三个 box:border-box,padding-box,content-box。当我们设置 background-image 时,默认是设置在 border-box 上的。但是借助 background-clip 我们可以实现将 background-image覆盖其他盒子,此外,他还支持多个盒子一起设置。这,这真的是太棒了。

于是,我们将content-box放一个白色渐变,在padding-box放一个好看的渐变,就得到如下效果:

See the Pen gradient-border by imgss
(@imgss) on CodePen.

嵌套和:after 伪类

那么,还有别的方案吗?最容易想到的是嵌套,外面的元素负责渐变,里面的元素负责纯色。伪类的实现原理也是一样的。这里就不详细展开了,参看下面的demo:

See the Pen Round Corners + Gradient Border by Rob
(@4cr3) on CodePen.

animation

有时候,设计师还想在边框上加一些动画,虽然我还没遇到,但是,有备无患嘛,下面是收集的一些例子:

https://codepen.io/luoyjx/pen/dWjxNP

https://codepen.io/akinzmn/pen/OeWoga

https://codepen.io/dominikcichon/pen/Gzwqbv

如何实现css渐变圆角边框的更多相关文章

  1. CSS第四天总结 更多的属性 圆角 边框图片 段落属性 颜色渐变 盒子阴影

    圆角边框: border-radius    一个值时表示四个角用的圆半径,4个值时分别是左上角.右上角.左下角.右下角,单位可以是px和百分比,百分比是半径相对于边框长度的比例 在CSS3中我们终于 ...

  2. css圆角边框

    一.CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点: * 减少维护的工作量.图片文件的生成.更新. ...

  3. [css]《css揭秘》学习(四)-一个元素实现内圆角边框

    如图所示的圆角边框有两个元素很好实现,用一个元素也可以实现. <html> <head> <meta charset="utf-8"> < ...

  4. 【CSS】使用边框和背景

    1. 应用边框样式 先从控制边框样式的属性开始.简单边框有三个关键属性:border-width.border-style 和 border-color . <!DOCTYPE html> ...

  5. css3:border-radius圆角边框详解 (变圆 图片)

    转:http://www.kuqin.com/shuoit/20141014/342620.html border-radius:50% 今天来聊聊这个border-radius属性,radius的英 ...

  6. 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

  7. border-radius是向元素添加圆角边框的方法

    border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角.右上角.右下角和左下 ...

  8. 如何实现.5px的线条和.5px的圆角边框

    实现.5px的线条 网络上有很多方法,如设置viewport,box-shawdow,border-image,background-image,transform:scale等,这里不做介绍(百度或 ...

  9. CSS3利用一个div实现内圆角边框效果

    *首先要清楚的是,box-shadow的形状会随着border-radius变化.下面的例子可以证明: <!doctype html> <html lang="en&quo ...

  10. css3如何实现圆角边框

    圆角边框是css3新增属性,在圆角边框出现之前,前端开发有的采用整块的圆角图片作为背景,有的采用小的圆角图片分别放在元素的四角,非常麻烦,灵活性差,也达到降低了网站的整体性能,而圆角边的出现则降低了开 ...

随机推荐

  1. Vim常用命令

    一.插入命令 a 在光标所在字符后插入A 在光标所在行尾插入i 在光标所在字符前插入I 在光标所在行首插入o 在光标下插入新行O 在光标上插入新行 二.定位命令 :set nu 设置行号:set no ...

  2. QPalette的用法

    1.QPalette的概念 调色板类QPallete提供了颜色角色(color roles)概念,是指当前GUI界面中颜色的职责,通过枚举变量QPalette::ColorRole来定义, 比较常用的 ...

  3. 扩展lamda表达中distinct按照字段去除重复

    首先,我们定义一个Student类来测试. public class Student { public int ID { get; set; } public string Name { get; s ...

  4. iOS隐私政策

    隐私政策 本应用尊重并保护所有使用服务用户的个人隐私权.为了给您提供更准确.更有个性化的服务,本应用会按照本隐私权政策的规定使用和披露您的个人信息.但本应用将以高度的勤勉.审慎义务对待这些信息.除本隐 ...

  5. node04-buffer

    目录:node01-创建服务器 node02-util node03-events node04-buffer node05-fs node06-path node07-http node08-exp ...

  6. python 多线程网络编程 ( 二 )

    背景 我在[第一篇文章中]已经介绍了如何实现一个多线程的todo应用,接下来我将会研究如何使这个服务器完成下面这几个功能. 1.使用正则表达式解析用户发送的请求数据: 2.使用ThreadLocal技 ...

  7. JavaWeb学习之JSTL自定义标签库的使用、JSTL自定义函数库(7)

    一.自定义标签,步骤 * 确定需求 * <my:date /> 输出当前系统的时间 yyyy-MM-dd hh:mm:ss:SSS * 编写Java类 新建包名:com.yxl.tag,新 ...

  8. onload是代码在也买你的追加元素的完成,而不是http请求的完成

  9. IOS_OC_地图与定位

    知识点介绍 一. 定位 实现一次定位 CLLocation对象介绍 实现持续定位 请求用户授权 二. 地理编码 正地理编码 反地理编码 三. 地图的基本使用 显示用户位置 设置地图显示类型 根据用户位 ...

  10. 老李秘技:LoadRunner支持参数文件极限是多大

    老李秘技:LoadRunner支持参数文件极限是多大   Controller不支持参数文件大于20m