前言

最近在写一个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. [转] spring-boot集成swagger2

    经测,spring-boot版本使用1.5.2+时需使用springfox-swagger2版本2.5+(spring-boot 1.2 + springfox-swagger2 2.2 在未扫描ja ...

  2. Python怎么去写单元测试用例去测试hello world呢

    逛着博客园,看到乙醇大佬的一篇随笔 https://www.cnblogs.com/nbkhic/p/9370446.html,于是就在想怎么测试这句hello world print('hello ...

  3. 翻书shader

    //把下面的shader挂载到plane上,调节_Angle Shader "Unlit/PageTurning"{ Properties { _Color ("Colo ...

  4. 搭建kafaka集群

    服务器环境准备 使用vm虚拟三个linux主机 192.168.212.174 192.168.212.175 192.168.212.176 Zookeeper集群环境搭建 1.每台服务器节点上安装 ...

  5. Vue 动态路由的实现以及 Springsecurity 按钮级别的权限控制

    思路: 动态路由实现:在导航守卫中判断用户是否有用户信息,通过调用接口,拿到后台根据用户角色生成的菜单树,格式化菜单树结构信息并递归生成层级路由表并使用Vuex保存,通过 router.addRout ...

  6. Cpp_Primer_4th_Edition-source-code

    Cpp_Primer_4th_Edition-source-code 根据书上的去找,官网已经找不到了,毕竟第6版都已经出来了.不过有的朋友用的还是第4版,我的纸质书是第5版,pdf是第4版,都有在看 ...

  7. SqlServer调用OPENQUERY函数远程执行增删改查

    /* OPENQUERY函数,远程执行数据库增删改查 关于OPENQUERY函数第二个参数不支持拼接变量的方案 方案1:将OPENQUERY语句整个拼接为字符串,再用EXEC执行该字符串语句 方案2: ...

  8. 学习docker 部署nginx记录

    docker pull nginx $ docker pull nginx $ docker run --name nginx-test -p 8081:80 -d nginx docker conf ...

  9. Nginx fastcgi_cache权威指南

    一.简介 Nginx版本从0.7.48开始,支持了类似Squid的缓存功能.这个缓存是把URL及相关组合当做Key,用Md5算法对Key进行哈希,得到硬盘上对应的哈希目录路径,从而将缓存内容保存在该目 ...

  10. Python基础知识(五)------字典

    Python基础知识(四)------字典 字典 一丶什么是字典 ​ dict关键字 , 以 {} 表示, 以key:value形式保存数据 ,每个逗号分隔 ​ 键: 必须是可哈希,(不可变的数据类型 ...