前言

最近在写一个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——设置边框渐变色的更多相关文章

  1. 使用CSS设置边框和背景

    一.设置边框 1.边框样式 属性 说明 border-width 设置边框的宽度 boder-style 设置边框的样式 border-color 设置边框的颜色 a.border-width属性 自 ...

  2. CSS设置边框、符号、背景样式、链接属性

    一.CSS边框空白 padding-top:10px; /*上边框留空白*/ padding-right:10px; /*右边框留空白*/ padding-bottom:10px; /*下边框留空白* ...

  3. css设置边框阴影;box-shadow的使用

    html代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  4. 使用css设置边框背景图片

    使用css的特有属性,给不同的盒子添加边框图片. 为什么会有这一场景呢.因为,UI给我们前端的边框图片可能未必适合我们当前的内容. 这里我们主要使用到的属性有: border-image-source ...

  5. css3设置边框属性

    css设置边框属性:设置边框圆角 <!DOCTYPE html> <html> <head lang="en"> <meta charse ...

  6. CSS border边框属性教程(color style)

    CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...

  7. CSS设置DIV边框为圆角,添加背景色溢出的问题

    这么几天需要做一个类似于层级展示的东西,最后一层需要做一些div框来展示数据,我用css设置了div的边框为圆角,但是添加背景色的时候颜色溢出,覆盖了四个角的圆弧,效果如图所示: css代码如下: . ...

  8. 如何用纯 CSS 创作一个渐变色动画边框

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odpRKX 可交互视频教 ...

  9. 前端每日实战:16# 视频演示如何用纯 CSS 创作一个渐变色动画边框

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odpRKX 可交互视频教程 此视频 ...

随机推荐

  1. sk-learn 选择正确的估算器

    选择正确的估算器 解决机器学习问题最困难的部分通常是为工作找到正确的估算器. 不同的估计器更适合于不同类型的数据和不同的问题. 下面的流程图旨在为用户提供一些关于如何处理有关哪些估算器尝试数据的问题的 ...

  2. jquery预加载显示百分比

    jquery预加载显示百分比 <pre> <img class="bj loadimg" loadimg="/weiqingshu/images/1/b ...

  3. 1.4 Linux下对lvm逻辑卷分区大小的调整(针对xfs和ext4不同文件系统)

      当我们在安装系统的时候,由于没有合理分配分区空间,在后续维护过程中,发现有些分区空间不够使用,而有的分区空间却有很多剩余空间.如果这些分区在装系统的时候使用了lvm(前提是这些分区要是lvm逻辑卷 ...

  4. updatetable 违反并发性: UpdateCommand 影响了预期 1 条记录中的 0 条造成问题一种原因

    数据库 表A ID  UserName DeptID DeptName 1      张三          1          技术部 表B ID   DeptName 1      市场部 当使 ...

  5. spring data jpa碰到的坑

    1.不能从别的类的repository那里 执行另一个类的sql,这样映射会失败. 2.有entity,就要有repository,并且还要有id注解 3.还要多表联查未测试,估计要用map去映射出来 ...

  6. jQuery基础事件处理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. springboot2.x 使用redis (入门)

    在使用之前先简单介绍一下,redis和mongoDB这两个nosql的区别以及使用场景. 1. redis redis是一个分布式缓存.高性能的key-value数据库.支持存储的value类型包括s ...

  8. Vuecli3

    第一步安装 npm install -g @vue/cli 第二步关于项目配置 因为cli3去除了cli2中index.html 转而存到了publi文件中 如果需要配置跨域 页面入口 打包文件路径都 ...

  9. MMKV 多进程K-V组件 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  10. cas sso docker部署service

    cas协议: 1. 拉取镜像 docker pull apereo/cas:${tag} 2. 启动容器 docker run --name cas -p : -p : apereo/cas:v5.3 ...