前言

最近在写一个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. SpringBoot系列教程web篇之过滤器Filter使用指南

    web三大组件之一Filter,可以说是很多小伙伴学习java web时最早接触的知识点了,然而学得早不代表就用得多.基本上,如果不是让你从0到1写一个web应用(或者说即便从0到1写一个web应用) ...

  2. Vue框架(四)——路由跳转、路由传参、cookies、axios、跨域问题、element-ui模块

    路由跳转 三种方式: $router.push / $router.go / router-link to this.$router.push('/course'); this.$router.pus ...

  3. Python之路【第十五篇】开发FTP多线程程序

    要求: 1.用户加密认证 2.允许同时多用户登录 3.每个用户有自己的家目录,且只能访问自己的家目录 4.对用户进行磁盘配额,每个用户的可用空间不同 5.允许用户在ftp server上随意切换目录 ...

  4. Python开发【源码剖析】 Dict对象

    static void ShowDictObject(PyDictObject* dictObject) { PyDictEntry* entry = dictObject->ma_table; ...

  5. 解决docker容器中Centos7系统的中文乱码

    解决docker容器中Centos7系统的中文乱码问题有如下两种方案: 第一种只能临时解决中文乱码: 在命令行中执行如下命令: # localedef -i zh_CN -f UTF-8 zh_CN. ...

  6. JMeter安装及简单应用示例

    一.Jmeter下载 官网地址:http://jmeter.apache.org/ 1.进入官网 2.选中一个版本下载 3.解压安装即可 二.Jmeter环境变量配置 1.   电脑桌面----> ...

  7. 「UER#2」信息的交换

    「UER#2」信息的交换 吉利题.. 不难发现,置换中的每一个循环是独立的,每一个循环分别对应一个独立的联通块. 根据题目的性质,每一个联通块做的事情等价于其按照编号从小到大遍历的的dfs生成树做的事 ...

  8. H5页面跳转与传值

    页面之间的跳转经常使用a标签,使用mvc框架的都是通过访问controller的请求方法,返回请求页面.但本次开发,前端与后台完全分离,前端APP使用HBuider来开发,后台数据就无法使用mvc框架 ...

  9. tkinter基础-输入框、文本框

    本节内容 了解输入框.文本框的使用方法 利用1制作简易界面 首先明确上面由几个元素组成:该界面由界面标题,输入框.两个按钮.文本框组成. 该界面我们需要实现的功能: 在输入框中输入文字,点击inser ...

  10. hystrix中request cache请求缓存

    有一个概念,叫做reqeust context,请求上下文,一般来说,在一个web应用中, 我们会在一个filter里面,对每一个请求都施加一个请求上下文,就是说,tomcat容器内,每一次请求,就是 ...