前言

最近在写一个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. Java学习笔记二——正则表达式

    Java正则表达式 正则表达式的规则 “abc” 匹配字符串abc [abc] 匹配[]里任意一个字符 [a-z]: 匹配所有小写字母中的任意一个字符 [A-Z]: 匹配所有大写字母中的任意一个字符 ...

  2. RabbitMq 概述

    RabbitMQ是实现了高级消息队列协议(Advanced Message Queueing Protocol , AMQP)的开源消息代理软件(亦称面向消息的中间件). 1.AMQP协议 Rocke ...

  3. linux tomcat开机自启/nginx开机自启

    修改/etc/rc.d/rc.local文件,修改完成后需执行以下指令才能正常自启动 chmod +x /etc/rc.d/rc.local #!/bin/bash # THIS FILE IS AD ...

  4. MNIST机器学习入门(一)

    一.简介 首先介绍MNIST 数据集.如图1-1 所示, MNIST 数据集主要由一些手写数字的图片和相应的标签组成,图片一共有10 类,分别对应从0-9 ,共10 个阿拉伯数字. 原始的MNIST ...

  5. [BZOJ3230]相似子串(后缀数组)

    显然可以通过后缀数组快速找到询问的两个串分别是什么,然后正反各建一个后缀数组来求两个串的LCP和LCS即可. #include<cstdio> #include<cstring> ...

  6. 2)NET CORE特性与优势

    先看看netcore有哪些特性,哪些优点,与.net frameworkd 差异吧: l  跨平台: 可以在 Windows.macOS 和 Linux 操作系统上运行. l  跨体系结构保持一致:  ...

  7. 关于如何控制一个页面的Ajax读数据只读一次的简单解决办法!

    例如:一个页面有一个按钮,点击的时候用ajax去后台获取数据,获取成功以后返回.下次再点击的时候就不要去获取数据了. 解决办法有很多: 1.用Get方法去读数据,会缓存. 2.用jquery的data ...

  8. NIO开发Http服务器(5-完结):HttpServer服务器类

    最近学习了Java NIO技术,觉得不能再去写一些Hello World的学习demo了,而且也不想再像学习IO时那样编写一个控制台(或者带界面)聊天室.我们是做WEB开发的,整天围着tomcat.n ...

  9. JAVA基础之JavaEE与MVC

    所谓的架构.模式都是方便开发和查看的,分工明确的,理解每层的具体的意义! 一.JavaEE: 1.Java EE,Java 平台企业版(Java Platform Enterprise Edition ...

  10. Celery:Monitor

    参考文档:http://docs.celeryproject.org/en/latest/userguide/monitoring.html#guide-monitoring