CSS——设置边框渐变色

小灰灰 2021-11-01 09:28 460阅读 0赞

# 前言 #

最近在写一个typecho的主题，刚好遇到这样一个问题就记录下吧

# 步骤 #

这是一个CSS的过度效果，效果如下。

![1334215-20190802142404805-1579777803.gif][]

## 代码 ##

.object{
        width: 50px;
        height: 50px;
        background-color: rgba(255,255,255,0);
        margin-right: auto;
        margin-left: auto;
        border: 4px solid #FFF;
        border-image: -webkit-linear-gradient(#d4fc79,#96e6a1) 10 10;
        border-image: -moz-linear-gradient(#d4fc79,#96e6a1) 10 10;
        border-image: linear-gradient(#d4fc79,#96e6a1) 10 10; 
        left: 73px;
        top: 73px;
        position: absolute;
    }

> 主要的其实只有一个`border-image`

border-image: -webkit-linear-gradient(#d4fc79,#96e6a1) 10 10;
        border-image: -moz-linear-gradient(#d4fc79,#96e6a1) 10 10;
        border-image: linear-gradient(#d4fc79,#96e6a1) 10 10;

## loading资源 ##

链接：[https://share.weiyun.com/5P5Q3kF][https_share.weiyun.com_5P5Q3kF]

转载于:https://www.cnblogs.com/wangyang0210/p/11288362.html

[1334215-20190802142404805-1579777803.gif]: /images/20211101/be610e680a2d41099696457b96c933f9.png
[https_share.weiyun.com_5P5Q3kF]: https://share.weiyun.com/5P5Q3kF

发表评论取消回复

表情：

评论列表（有 0 条评论，460人围观）

还没有评论，来说两句吧...

相关阅读

相关前端通过值设置渐变色

可以使用 CSS 的 `background` 属性来设置渐变色。具体方法如下： 1. 在 CSS 中添加 `background` 属性，并设置为渐变色。 .y

淡淡的烟草味﹌/ 2024年03月27日 12:36/ 0 赞/ 23 阅读

相关 Matplotlib 库设置渐变色

在 Matplotlib 中设置渐变色可以使用 `LinearSegmentedColormap` 函数，它需要传入渐变色的控制点、颜色值、颜色标签等参数。举个例子，如果要

朴灿烈づ我的快乐病毒、/ 2024年03月25日 14:21/ 0 赞/ 23 阅读

相关设置边框_进阶秀米边框不能设置渐变色？瞎说

跟苏苏一起每天学点排版干货【这是苏苏的第36篇教程】我们说过：普通边框制作(?戳)、异形边框制作(?戳)，这一次，再来一点其他边框叭！ 01 特

r囧r小猫/ 2023年01月06日 12:59/ 0 赞/ 446 阅读

相关 5种CSS实现渐变色边框（Gradient borders方法的汇总

![3c8a5fd65dde75bccd23d9fee67dc194.png][] 来源 | https://segmentfault.com/a/1190000040

蔚落/ 2022年08月28日 05:43/ 0 赞/ 206 阅读

相关 CSS3实现渐变色字体

前两天在学习移动端项目，于是就拿京东的移动端页面来模仿和学习了，在模仿的过程中，我发现了京东移动端页面的字体有渐变色，很是好奇，很感兴趣，于是就是查看了代码，并且百度了一

电玩女神/ 2022年06月04日 01:53/ 0 赞/ 225 阅读

相关 Echarts图形设置渐变色

“岑夫子,丹丘生.将进酒,杯莫停” 给柱状图设置渐变色,效果如下: ![这里写图片描述][70] 设置代码如下: series: [

Love The Way You Lie/ 2022年05月25日 03:45/ 0 赞/ 241 阅读

相关文字渐变色

方法一 background-clip + text-fill-color 李祺丰·前端 <h2 class="text-gradient" data-text

古城微笑少年丶/ 2022年05月22日 04:07/ 0 赞/ 229 阅读

相关 CSS——设置边框渐变色

前言最近在写一个typecho的主题，刚好遇到这样一个问题就记录下吧步骤这是一个CSS的过度效果，效果如下。 ![1334215-201908021424

小灰灰/ 2021年11月01日 09:28/ 0 赞/ 461 阅读

相关 CSS3 - 线性渐变色

解决方法一、 linear-gradient() background-color: red; / 浏览器不支持的时候显示 / backgro

太过爱你忘了你带给我的痛/ 2021年07月26日 11:21/ 0 赞/ 435 阅读

相关 flutter Container设置渐变色

不得不说flutter在ui方面确实强大，可能用Android比较懒吧，下面说一下flutter中的Container设置渐变色，主要是在decoration里面进行设置...

- 日理万妓/ 2021年06月06日 15:19/ 0 赞/ 1168 阅读