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 可交互视频教程 此视频 ...
随机推荐
- js精度缺失问题
/** ** 加法函数,用来得到精确的加法结果 ** 说明:javascript的加法结果会有误差,在两个浮点数相加的时候会比较明显.这个函数返回较为精确的加法结果. ** 调用:accAdd(arg ...
- 嵌入式02 STM32 实验03 时钟系统
时钟系统是处理器的核心,所以认真学习时钟系统是必要的,有助于深入理解STM32. 由于STM32的外设很多,有的外设不需要太高的时钟频率,同一个电路,时钟越快功耗越大,同时抗电磁干扰能力也越弱,所以对 ...
- Python爬虫:现学现用xpath爬取豆瓣音乐
爬虫的抓取方式有好几种,正则表达式,Lxml(xpath)与BeautifulSoup,我在网上查了一下资料,了解到三者之间的使用难度与性能 三种爬虫方式的对比. 这样一比较我我选择了Lxml(xpa ...
- drf中的各种view,viewset
drf中的各种view,viewset Django REST framework里有各种各样的view,让我有点蒙,得好好捋一捋这关系. 视图的作用 Django用"视图"这个概 ...
- MyBatis和spring整合简单实现
spring和MyBatis整合: 导入spring和MyBatis的整合jar包,以及其依赖jar包: 导入MyBatis和spring的整合jar包. spring的核心jar包. 定义Mybat ...
- Java自学-控制流程 结束外部循环
Java中结束外部循环 Java中如何结束外部for循环? 示例 1 : 结束当前循环 break; 只能结束当前循环 public class HelloWorld { public static ...
- UIView与CALayer的区别,很详细(基础教学拓展)转
研究Core Animation已经有段时间了,关于Core Animation,网上没什么好的介绍.苹果网站上有篇专门的总结性介绍,但是似乎原理性的东西不多,看得人云山雾罩,感觉,写那篇东西的人,其 ...
- vue中监听页面是否有回车键按下
需求:当我在登录页面输入密码和账号后,按下回车键实现登录 mounted(){ let _this = this document.onkeydown = function(e) { if(e.key ...
- centos7 上Docker安装与启动
1. docker centos 文档地址 https://docs.docker.com/install/linux/docker-ce/centos/ 2. 安装环境说明: docker社区版 ...
- scrapy 管道里面使用mysql插入数据库
# -*- coding: utf-8 -*- # Define your item pipelines here # # Don't forget to add your pipeline to t ...