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 可交互视频教程 此视频 ...
随机推荐
- IDEA+docker实践
1.下载 https://www.jetbrains.com/ 2.下载jdk 目前在官网下载jdk的时候需要登陆,这边分享一个账号,方便下载 2696671285@qq.com 密码:Oracle1 ...
- C基础 stack 设计
前言 - stack 设计思路 先说说设计 stack 结构的原由. 以前我们再释放查找树的时候多数用递归的后续遍历去释放. 其内部隐含了运行时的函数栈, 有些语言中存在爆栈风险. 所以想运用显示栈来 ...
- 关于vuecli的一些问题
在vue打包之后,我们引入的css路径和js路径会变成绝对路径 需要在vue.config.js里面设置publicpath为"./" 同时在做前后端分离开发时,我们通常会用到ax ...
- SonarQube执行代码分析时,报错ERROR: Unable to create symbol table for : /**/*.java java.lang.IllegalArgumentException: Unsupported class file major version 55
若要转载本文,请务必声明出处:https://www.cnblogs.com/zhongyuanzhao000/p/11686633.html 起因: 最近正在尝试SonarQube的简单使用,但是当 ...
- es常用操作
1.查看所有索引 _cat/indices?v 2.删除索引 DELETE my_index 3.查询缓存 curl /my_index/_search?request_cache=true' -d' ...
- yum命令安装jdk
1.查看是否已安装JDK,卸载 yum list installed |grep java java--openjdk.x86_64 :.b13.el7_5 @updates java--openjd ...
- 「UR#5」怎样更有力气
「UR#5」怎样更有力气 解题思路 考虑没有限制的情况,一定是把操作离线下来,按照边权从小到达做.可以发现,如果没有限制,完全图是多余的,直接拿树边进行合并就可以了.我们要做这么一件事情,把每个点属于 ...
- [转]Sublime Text 3安装Json格式化插件
1.安装Package control 首先需要安装Package control,如果已经安装请跳过此步骤.按Ctrl+Shift+p打开命令搜索框,输入PC,点击图中条目安装,如下图: 成功后 ...
- Ubuntu中使用sanp一键安装安装Notepad ++
很少有文本编辑器像Notepad ++一样流行得到广大用户的喜爱,Notepad ++是一个免费的开源代码编辑器,专为Windows构建,用C ++编写.以其小巧的应用程序大小和出色的性能而闻名,但缺 ...
- 【转载】 C#中使用int.TryParse方法将字符串转换为整型Int类型
在C#编程过程中,将字符串string转换为整型int过程中,时常使用的转换方法为int.Parse方法,但int.Parse在无法转换的时候,会抛出程序异常,其实还有个int.TryParse方法可 ...