效果如下图：

代码如下：

.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 径向渐变实现渐变小圈的更多相关文章

  1. CSS中和颜色及渐变

    CSS可以设置的颜色 颜色名称 transparent(全透明黑色) pink yellowgreen 等指定的颜色名称 16进制 #ABCDEF 参数 含义 范围 AB 红色渠道值 00-FF CD ...

  2. CSS 3 阴影,倒影,渐变

    盒子阴影 box-shadow:盒子的阴影 第一个参数:设置的是阴影的水平偏移量 第二个参数:设置的是阴影的垂直偏移量 第三个参数:设置阴影的模糊程度 第四个参数:设置阴影外延值 第五个参数:阴影的颜 ...

  3. CSS属性: 阴影 轮廓 渐变

    注: 本文摘自 宁静致远 - CSDN / 但愿人长久 千里共婵娟 - CSDN 阴影 使用box-shadow属性可以为元素添加阴影效果, 比如 box-shadow: h-shadow v-sha ...

  4. 再说CSS3渐变——线性渐变

    渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...

  5. CSS3渐变——线性渐变

    渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...

  6. 巧妙的实现 CSS 斜线(炫酷的小效果)

      开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果 ...

  7. Animo.js ：一款管理 CSS 动画的强大的小工具

    Animo.js 是一个功能强大的小工具,用于管理 CSS 动画.它的特色功能包括像堆栈动画,创建跨浏览器的模糊,设置动画完成的回调等等.Animo 还包括惊人的 animate.css,为您提供了近 ...

  8. 关于CSS中的float可能出现的小问题

    关于CSS中的float可能出现的小问题 前言:最近学习CSS的float所遇到点小问题,然后顺便分享给大家. 一.什么是CSS以及float (一) CSS概述 CSS是层叠样式表(英文全称:Cas ...

  9. 渐变显示渐变消失的BackgroundView

    渐变显示渐变消失的BackgroundView 效果如下: 源码: BackgroundView.h 与 BackgroundView.m // // BackgroundView.h // Test ...

  10. HTML＋CSS实现大盒子在小盒子的展示范围内进行滚动展示

    HTML+CSS实现大盒子在小盒子的展示范围内进行滚动展示 1.效果展示: 2.主要代码:样式: overflow:auto; 3.如果想要消除对应的滚动条: .out::-webkit-scroll ...

随机推荐

  1. 移动web_平面转换

    平面转换 平面 平移 旋转 缩放 概念:使用transform属性实现元素的位移.旋转.缩放等效果 注意点:行内元素所有的平面转换是没有效果的 平面: 平面转换的平面指的是二维平面(2D)只有X和Y轴 ...

  2. john破解linux用户密码

    John是kali-linux自带的密码破解工具,支持密码本破解.Linux的系统账户在/etc/passwd中,密码存于/etc/shadow中. 以下操作为例: (1)创建一个账户,

  3. redis注册成windows服务步骤

    1.cmd命令切换到redis的安装目录 2.执行如下命令,将redis注册成为windows的服务 redis-server --service-install redis.windows.conf ...

  4. socket-消息发送实战

    1. 函数用法 Handle.oobtainMessage(int what ,int arg1,int arg2,object obj)  2. 消息内容  3. 代码组合(隐私模式开关) 3.1 ...

  5. AWT+Swing实现百度图像识别

    1准备 1.1在百度智能云中创建自己的应用,得到API Key和Secret Key 1.2maven导入SDK依赖 2源码 import java.net.URLEncoder; /** * 植物识 ...

  6. 提取可执行文件中的调试信息 objcopy --only-keep-debug app app.debug

    https://blog.csdn.net/CaspianSea/article/details/17269977 set-debug-directory show-debug-directory i ...

  7. paddle 错误（ValueError: all input arrays must have the same shape）

    参考:voc数据集执行eval.py命令报错 · Issue #3456 · PaddlePaddle/PaddleDetection (github.com) 配置文件加这两行: EvalReade ...

  8. OV5640数据的解码

    为了配合开发板的使用,笔者搞了一个OV5640的摄像头模组,OV5640具体的相关手册及资料网上已经很多,感兴趣的都可以自行去查找,基本大同小异.这里也不把OV5640初始化的代码贴出来,因为就是简单 ...

  9. 【NPDP专项练习】第七章 产品生命周期管理

    第七章 产品生命周期管理 1.以下哪一项是产品生命周期缩短的原因之一? A 技术停滞不前 B 减少竞争 C 顾客要求更高 D 沟通障碍正在增加 答案:C 解析 A技术持续进步:B竞争加剧:D沟通增加 ...

  10. J V M（二）双亲委派机制及native

    package java.lang;public class String {// 双亲委派机制: 安全// 应用程序加载器-扩展程序加载器-根加载器// 自底向上检查类是否被加载,自顶向下加载类// ...