前言

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

步骤

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

代码

.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

CSS——设置边框渐变色的更多相关文章

  1. 使用CSS设置边框和背景

    一.设置边框 1.边框样式 属性 说明 border-width 设置边框的宽度 boder-style 设置边框的样式 border-color 设置边框的颜色 a.border-width属性 自 ...

  2. CSS设置边框、符号、背景样式、链接属性

    一.CSS边框空白 padding-top:10px; /*上边框留空白*/ padding-right:10px; /*右边框留空白*/ padding-bottom:10px; /*下边框留空白* ...

  3. css设置边框阴影;box-shadow的使用

    html代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  4. 使用css设置边框背景图片

    使用css的特有属性,给不同的盒子添加边框图片. 为什么会有这一场景呢.因为,UI给我们前端的边框图片可能未必适合我们当前的内容. 这里我们主要使用到的属性有: border-image-source ...

  5. css3设置边框属性

    css设置边框属性:设置边框圆角 <!DOCTYPE html> <html> <head lang="en"> <meta charse ...

  6. CSS border边框属性教程(color style)

    CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...

  7. CSS设置DIV边框为圆角,添加背景色溢出的问题

    这么几天需要做一个类似于层级展示的东西,最后一层需要做一些div框来展示数据,我用css设置了div的边框为圆角,但是添加背景色的时候颜色溢出,覆盖了四个角的圆弧,效果如图所示: css代码如下: . ...

  8. 如何用纯 CSS 创作一个渐变色动画边框

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odpRKX 可交互视频教 ...

  9. 前端每日实战:16# 视频演示如何用纯 CSS 创作一个渐变色动画边框

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odpRKX 可交互视频教程 此视频 ...

随机推荐

  1. linux设置root密码&进入不了root

    刚装的linux无法使用root需要初始化密码 1.设置密码 sudo passwd root 点击回车,然后输入两次你想设置的密码,比如123456 2.切换用户 su root 再输入你刚才设置的 ...

  2. 记事本 该文件含有unicode格式的字符 点确定就变乱码了,notePad++,UltraEditor等编辑器打开也变乱码?

    --问题 之前一直都是好的 今天电脑打开,发现电脑所有的TXT记事本,点开来全是乱码,甚至下过来的TXT,或者自己新建的TXT,打上中文字,点保存会弹出 该文件含有unicode格式的字符什么什么的, ...

  3. spring的exception

    Springmvc的对于异常类进行统一处理的方法 一.局部异常统一处理 当异常出现时,将抛给异常处理方法,异常处理发放接收到异常数据,进行处理,统一到异常页面 @ExceptionHandler:通过 ...

  4. day26——tyoe元类与object的联系、反射、函数与方法的区别、双下方法

    day26 type元类与object联系 type 获取对象从属于的类 python 中一切皆对象, 类在某种意义上也是一个对象,python中自己定义的类,以及大部分内置类,都是由type元类(构 ...

  5. 基于STM32F767两路互补SPWM波(HAL库)

    SPWM波指的是占空比呈正弦规律变化的PWM波,生成方式是在定时器中断中调整PWM波的占空比. 对于互补的两路SPWM波,一路为低电平 ‘0’ 时,另一路为高电平 ‘1’,即两路是互补的. 对于STM ...

  6. linux上文件的上传和下载

    现整理一篇linux上文件的上传和下载 第一种方式就是在windos上安装工具 如: 工具如何使用我就不赘述了,easy 第二种方式就是使用liux的命令(首先是文件上传) 上传文件(首先创建文件夹如 ...

  7. Gulp 给所有静态文件引用加版本号

    在juqery和easyui 盛行的年代许多项目采用纯静态页面去构建前端框架从而实现前后端分离的目的.项目开发周期内往往会频繁修改更新某个文件,当你将文件更新到服务器后客户端由于缓存问题而出现显示异常 ...

  8. C# vb .net图像合成-合成富文本

    在.net中,如何简单快捷地实现图像合成呢,比如合成文字,合成艺术字,多张图片叠加合成等等?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码 ...

  9. 遍历切片slice,结构体struct,映射map,interface{}的属性和值

    1 前言 说明:interface{}必须是前三者类型 2 代码 /** * @Author: FB * @Description: * @File: testOutput.go * @Version ...

  10. Error creating bean with name 'XXX' defined in file

    这个错误是我在之前操作时,错将另一个dubbo服务器也加载到了该dubbo服务器上(pom.xml),所以出现了Error creating bean with name 'XXX' defined ...