css 径向渐变实现渐变小圈
效果如下图:

代码如下:
.b-list .ceil .line {
height: 20px;
width: 100%;
margin: 0 auto;
background: radial-gradient(rgba(235,116,63,0.9), rgba(235,116,63,0.3), rgba(235,116,63,0), rgba(235,116,63,0));
}
background:radial-gradient(rgba(235,116,63,0.9), rgba(235,116,63,0.3), rgba(235,116,63,0), rgba(235,116,63,0));
径向渐变是从中间到四周,,可根据实际情况设置渐变域。
css 径向渐变实现渐变小圈的更多相关文章
- CSS中和颜色及渐变
CSS可以设置的颜色 颜色名称 transparent(全透明黑色) pink yellowgreen 等指定的颜色名称 16进制 #ABCDEF 参数 含义 范围 AB 红色渠道值 00-FF CD ...
- CSS 3 阴影,倒影,渐变
盒子阴影 box-shadow:盒子的阴影 第一个参数:设置的是阴影的水平偏移量 第二个参数:设置的是阴影的垂直偏移量 第三个参数:设置阴影的模糊程度 第四个参数:设置阴影外延值 第五个参数:阴影的颜 ...
- CSS属性: 阴影 轮廓 渐变
注: 本文摘自 宁静致远 - CSDN / 但愿人长久 千里共婵娟 - CSDN 阴影 使用box-shadow属性可以为元素添加阴影效果, 比如 box-shadow: h-shadow v-sha ...
- 再说CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- 巧妙的实现 CSS 斜线(炫酷的小效果)
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果 ...
- Animo.js :一款管理 CSS 动画的强大的小工具
Animo.js 是一个功能强大的小工具,用于管理 CSS 动画.它的特色功能包括像堆栈动画,创建跨浏览器的模糊,设置动画完成的回调等等.Animo 还包括惊人的 animate.css,为您提供了近 ...
- 关于CSS中的float可能出现的小问题
关于CSS中的float可能出现的小问题 前言:最近学习CSS的float所遇到点小问题,然后顺便分享给大家. 一.什么是CSS以及float (一) CSS概述 CSS是层叠样式表(英文全称:Cas ...
- 渐变显示渐变消失的BackgroundView
渐变显示渐变消失的BackgroundView 效果如下: 源码: BackgroundView.h 与 BackgroundView.m // // BackgroundView.h // Test ...
- HTML+CSS实现大盒子在小盒子的展示范围内进行滚动展示
HTML+CSS实现大盒子在小盒子的展示范围内进行滚动展示 1.效果展示: 2.主要代码:样式: overflow:auto; 3.如果想要消除对应的滚动条: .out::-webkit-scroll ...
随机推荐
- linux中用crontab定时任务启动jar无效
修改前脚本内容如下: #!/bin/bash nohup java -Xms512m -Xmx512m -jar /opt/jar/xx-0.0.1-SNAPSHOT.jar & 检查了各方面 ...
- 【三维重建】Ubuntu20.04进行RealSenseD435环境配置及初步使用
一.环境配置 github上面的教程:https://github.com/IntelRealSense/librealsense/blob/master/doc/distribution_linux ...
- 使用JSONObject将实体类,String类型和JSON类型相互转换(java)
使用JSONObject将实体类,String类型和JSON类型相互转换(java) https://blog.csdn.net/weixin_42424720/article/details/846 ...
- Java线程安全之synchronized 与 lock的异同
* synchronized 与 lock的异同?* 相同:二者都可以解决线程安全问题* 不同:synchronized机制再执行完相应的同步代码以后,自动的释放同步监视器* Lock需要手动的启动同 ...
- 调度器45—wake_affine
基于 Linux-5.10 一.wake_affine 简介 1. 背景 在进程唤醒选核路径中, wake_affine 倾向于将被唤醒进程(wakee)尽可能安排在 waker所在 CPU 上, 这 ...
- Vue 双向绑定
devtools工具 使用devtools工具可以让你更加方便的查看到Vue实例中数据的变化. 在chorme商店搜索安装即可. 双向绑定 v-model 双向绑定一般都是与input家族进行绑定. ...
- C# null和Any()检查的快捷方式
在C#6中 if (x.Items?.Any() == true) 也可以写自己的扩展方法: public static bool NotNullOrEmpty<T>(this IEnum ...
- 实用的JavaScript技巧
1.数组去重 let arr = [...new Set([1,2,3,2,1])]; //输出:[1, 2, 3] 2.删除数组中的虚值(undefined .null.NaN.0 .'' .fal ...
- 已知内存BUF单元开始的区域中存放有一组无符号字节数据,要求将这些数据按从小到大的顺序排列,排序后的数据依然放在原来的存储区中。
设计要求: 已知内存BUF单元开始的区域中存放有一组无符号字节数据,要求将这些数据按从小到大的顺序排列,排序后的数据依然放在原来的存储区中.(10分) #make_BIN# BUF DB 22,21, ...
- Linux - TOP命令解析
第一行: 当前系统时间1 系统已经运行时间(在这期间没有重启过)2 users 当前有2个用户登录系统 load average:后面的三个数分别是1分钟.5分钟.15分钟的负载情况.如果这个数除以 ...