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 可交互视频教程 此视频 ...
随机推荐
- Oracle Spatial分区应用研究之五:不同分区粒度+本地空间索引效率对比
1.实验目的 若使用本地空间索引,不同分区粒度将产生不同索引组织,其索引分区个数.大小.R-TREE树结构均不相同.那么,在什么分区粒度下的本地空间索引效率较高呢? 2实验数据 实验数据为全国2531 ...
- 004 Thymeleaf学习笔记
1.Thymeleaf概述 SpringBoot并不推荐使用jsp,但是支持一些模板引擎技术:Freemarker.Thymeleaf.Mustache. 简单说, Thymeleaf 是一个跟 Ve ...
- Vim 入门
Vim 简介 打开 Vim的四种模式 一些命令 插入 移动 文件 编辑 环境设置 .vimrc 更多命令 环境设置 折叠 显示 Vim 简介 Vim 是字符模式下的一种文本编辑器,不需要图形界面,它是 ...
- 我瞅瞅源码系列之---flask
快速使用 通过werkzurg 了解wsgi threading.local和高级 LocalStack和Local对象实现栈的管理 Flask源码之:配置加载 Flask源码之:路由加载 ...
- C# Datatable、DataReader等转化json
//对象转换为Json字符串 public static string ToJson(object jsonObject) { object objectValue = string.Empty; s ...
- [個人紀錄] WindowsLiveWriter 插入代碼跳出錯誤
跳出找不到設定檔Can’t load configruaration fromC:\Users\…\AppData\Roaming\Windows Live Writer\WindowsLiveWri ...
- sqlserver还原差异备份
因为之前遇到还原差异备份,最开始遇到SQLServer报错:"无法还原日志备份或差异备份,因为没有文件可用于前滚".查阅很多资料后,终于得到解决.收集整理成这篇随笔. 问题原因:出 ...
- 基于xilinx Zynq UltraScale MPSoC平台的核心板及开发板介绍-米尔科技
近日,米尔科技推出国内首款基于xilinx Zynq UltraScale+MPSoC 平台的核心板及开发板.其优势主要有:采用16纳米制程,相比Znyq7000系列每瓦性能提升5倍,且单芯片融合4核 ...
- SpringBoot之多Profile配置
近来在利用闲暇时间巩固下SpringBoot的基本知识,然后自己也做一些笔记,整理下当时所学知识,后面就干脆写到这里来了. 多Profile配置文件 在SpringBoot主配置文件编写的时候,文件名 ...
- 【Java基础】- Java学习路线图
Java的学习路线图,整理以备自己学习和温习. 1.Java基础 具体内容: 1. 编程基础(开发环境配置.基础语法.基本数据类型.流程控制.常用工具类) 2. 面向对象(继承.封装.多态.抽象类.接 ...