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 可交互视频教程 此视频 ...
随机推荐
- 各手机PC品牌投屏功能连接方法
一.iOS终端(iPhone/iPad)无线投屏: 1.将iPhone或iPad与必捷会议盒子连接至同一路由器: 2.滑动iPhone/iPad的屏幕,调出Airplay功能,选择需要投屏的主机,开始 ...
- VMware版本为15安装win7旗舰版不能成功安装VMware tools
VMware版本为15安装win7旗舰版不能成功安装VMware tools 出现的问题: 一直报错说需要系统更新到SP1系统,到网上找了很多升级方式,都未果 直接通过Windows Update,未 ...
- [BZOJ4382][POI2015]Podział naszyjnika (神奇HASH)
[问题描述] 长度为n 的一串项链,每颗珠子是K 种颜色之一.第i 颗与第i-1,i+1 颗珠子相邻,第n 颗与第1 颗也相邻. 切两刀,把项链断成两条链.要求每种颜色的珠子只能出现在其中 ...
- 学Python要避免哪些坑,如何巩固好基础
学Python要避免哪些坑?零基础怎么入门Python?Python入门简单.语法简洁.功能强大,非常适合零基础入门IT行业的人学习.随着人工智能时代的来临,企业纷纷选择使用Python进行开发,Py ...
- springboot2.x 使用redis (入门)
在使用之前先简单介绍一下,redis和mongoDB这两个nosql的区别以及使用场景. 1. redis redis是一个分布式缓存.高性能的key-value数据库.支持存储的value类型包括s ...
- stompjs, websocket和nginx的配置
server { listen 8080; location /socket/ { proxy_pass http://socket_server/; proxy_s ...
- hystrix中request cache请求缓存
有一个概念,叫做reqeust context,请求上下文,一般来说,在一个web应用中, 我们会在一个filter里面,对每一个请求都施加一个请求上下文,就是说,tomcat容器内,每一次请求,就是 ...
- nginx+lua访问流量实时上报kafka
在nginx这一层,接收到访问请求的时候,就把请求的流量上报发送给kafka storm才能去消费kafka中的实时的访问日志,然后去进行缓存热数据的统计 从lua脚本直接创建一个kafka prod ...
- WPF 的命令的自动刷新时机——当你 CanExecute 会返回 true 但命令依旧不可用时可能是这些原因
原文:WPF 的命令的自动刷新时机--当你 CanExecute 会返回 true 但命令依旧不可用时可能是这些原因 在 WPF 中,你可以使用 Command="{Binding Walt ...
- 使用NODEJS实现JSONP的实例
JSONP与JSON只有一字之差,我们在使用Jquery的Ajax调用的时候也是使用相同的方法来调用,两者的区别几乎只在于使用的dataType这个属性的不同.但是实际上JSON和JSONP是完全不同 ...