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

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

随机推荐

  1. Android源码——Broadcast Receiver

    Android源码分析——广播 广播是一种在组件之间进行消息传递的方式.广播机制的实现是基于Binder进程间通信. Binder进程间通信和广播的差别:Binder中,Client组件和Servic ...

  2. HTML5_02之视频、音频、Canvas

    1.HTML5新特性之视频播放--video: ①例:<video src=""></video> ②video标签默认为300*150的inline-bl ...

  3. MYSQL常见语句

    SHOW INDEXES  from tablename EXPLAIN  tablename EXPLAIN SELECT *  FROM tablename

  4. DropdownList的处理总结

    创建一: List<SelectListItem> items = new List<SelectListItem>() { new SelectListItem(){Text ...

  5. Visual Studio Team Services 帐户管理操作

    Visual Studio Team Services 网址: https://www.visualstudio.com/ 1.登陆 2.登陆后新建账户 3.删除团队项目 (1)点击自己的Visual ...

  6. Archlinux 升级 pacman 时遇到的问题及其解决

    这是 Archlinux 升级时经常碰到的老问题.提示如下 问题来了 # yaourt -Syua ==> 警告:使用 root 用户构建软件包存在风险. 请使用非特权用户运行 yaourt . ...

  7. Scala学习笔记:重要语法特性

    1.变量声明 Scala 有两种变量, val 和 var  val的值声明后不可变,var可变 val msg: String = "Hello yet again, world!&quo ...

  8. Kubernetes集群部署关键知识总结

    Kubernetes集群部署需要安装的组件东西很多,过程复杂,对服务器环境要求很苛刻,最好是能连外网的环境下安装,有些组件还需要连google服务器下载,这一点一般很难满足,因此最好是能提前下载好准备 ...

  9. DQL用户、权限管理(mysql8.0)

    DQL用户.权限管理(mysql8.0) 查看所有的用户: use mysql; -- 使用mysql数据库 select * from user; -- 查询user表中的全部信息,也就是用户 创建 ...

  10. 南邮ctf-web的writeup

    WEB 签到题 nctf{flag_admiaanaaaaaaaaaaa} ctrl+u或右键查看源代码即可.在CTF比赛中,代码注释.页面隐藏元素.超链接指向的其他页面.HTTP响应头部都可能隐藏f ...