CSS——设置边框渐变色
前言
最近在写一个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——设置边框渐变色的更多相关文章
- 使用CSS设置边框和背景
一.设置边框 1.边框样式 属性 说明 border-width 设置边框的宽度 boder-style 设置边框的样式 border-color 设置边框的颜色 a.border-width属性 自 ...
- CSS设置边框、符号、背景样式、链接属性
一.CSS边框空白 padding-top:10px; /*上边框留空白*/ padding-right:10px; /*右边框留空白*/ padding-bottom:10px; /*下边框留空白* ...
- css设置边框阴影;box-shadow的使用
html代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
- 使用css设置边框背景图片
使用css的特有属性,给不同的盒子添加边框图片. 为什么会有这一场景呢.因为,UI给我们前端的边框图片可能未必适合我们当前的内容. 这里我们主要使用到的属性有: border-image-source ...
- css3设置边框属性
css设置边框属性:设置边框圆角 <!DOCTYPE html> <html> <head lang="en"> <meta charse ...
- CSS border边框属性教程(color style)
CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...
- CSS设置DIV边框为圆角,添加背景色溢出的问题
这么几天需要做一个类似于层级展示的东西,最后一层需要做一些div框来展示数据,我用css设置了div的边框为圆角,但是添加背景色的时候颜色溢出,覆盖了四个角的圆弧,效果如图所示: css代码如下: . ...
- 如何用纯 CSS 创作一个渐变色动画边框
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odpRKX 可交互视频教 ...
- 前端每日实战:16# 视频演示如何用纯 CSS 创作一个渐变色动画边框
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odpRKX 可交互视频教程 此视频 ...
随机推荐
- OpenVAS开源风险评估系统部署方案
OpenVAS,即开放式漏洞评估系统,是一个用于评估目标漏洞的杰出框架.功能十分强大,最重要的是,它是“开源”的——就是免费的意思啦- 它与著名的Nessus“本是同根生”,在Nessus商业化之后仍 ...
- Linux内核参数详解
所谓Linux服务器内核参数优化(适合Apache.Nginx.Squid等多种web应用,特殊的业务有可能需要做略微调整),主要是指在Linux系统中针对业务服务应用而进行的系统内核参数调整,优化并 ...
- PHP设计模式 - 状态模式
状态模式当一个对象的内在状态改变时允许改变其行为,这个对象看起来像是改变了其类.状态模式主要解决的是当控制一个对象状态的条件表达式过于复杂时的情况.把状态的判断逻辑转移到表示不同状态的一系列类中,可以 ...
- static binding/dynamic binding
static binding/dynamic binding class Person { private void who() { System.out.println("Inside p ...
- ajax中如何使用全局变量?
在ajax中一般都是采取默认的异步请求,但是有时候参数是需要做到全局通用,这时候发起同步请求. 如下: $.ajax({ type:"post", url:"url路径& ...
- epoll原理
系统调用说明 epoll_create:在内核中创建epoll结构 epoll_ctl:add 1. 调用监听的文件的poll方法,设置callback 2. 设备就绪时唤醒等待队列上的进程,此时会调 ...
- 【数据结构】6.java源码ArrayList
关于ArrayList的源码关注点 1.从底层数据结构,扩容策略2.ArrayList的增删改查3.特殊处理重点关注4.遍历的速度,随机访问和iterator访问效率对比 1.从底层数据结构,扩容策略 ...
- UnicodeEncodeError: 'ascii' codec can't encode characters in position 18-22: ordinal not in range(128)
文件,放在site-package \Python27\Lib\site-packages sitecustomize.py # -*- coding: utf-8 -*- import sy ...
- 【题解】Luogu P5283 [十二省联考2019]异或粽子
原题传送门 看见一段的异或和不难想到要做异或前缀和\(s\) 我们便将问题转化成:给定\(n\)个数,求异或值最靠前的\(k\)对之和 我们珂以建一个可持久化01trie,这样我们就珂以求出每个值\( ...
- [cf 1239 B] The World Is Just a Programming Task (Hard Version)
题意: 给你一个长度为n的括号序列,你可以交换其中的两个元素,需要使该序列的n个循环移位中合法的括号序列个数尽量多. 输出最大的答案以及交换哪两个元素能够取到这个答案. $n\leq 3\times ...