通常用css生成单色或者同色系的的阴影（box-shadow)，其实可以通过巧妙的利用 filter: blur 模糊滤镜，可以生成渐变色或者说是颜色丰富的阴影效果，如图：

原理：

利用伪元素，生成一个与原图一样大小的新图叠加在原图之下，然后利用滤镜模糊 filter: blur() 配合其他的亮度/对比度，透明度等滤镜，制作出一个虚幻的影子，伪装成原图的阴影效果。

关键代码：

filter: blur(10px) brightness(80%) opacity(.8)

完整示例代码：

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Document</title>

    <style>

    .container {

        width: 200px;

        margin: 20px auto;

    }

    .avator {

        position: relative;

        width: 200px;

        height: 200px;

        border-radius: 50%;

        background: url(http://img0.imgtn.bdimg.com/it/u=3743150250,644096170&fm=26&gp=0.jpg) no-repeat center center;

        background-size: 100% 100%;

    }

    .avator::after {

        content: "";

        position: absolute;

        top: 10%;

        left: 0%;

        width: 100%;

        height: 100%;

        background: inherit;

        background-size: 100% 100%;

        border-radius: 50%;

        transform: scale(.95);

        filter: blur(10px) brightness(80%) opacity(.8);

        z-index: -1;

    }

    </style>

  </head>

  <body>

    <div class="container">

        <div class="avator"></div>

    </div>

  </body>

</html>

css生成彩色阴影的更多相关文章

  1. Android之自定义生成彩色二维码

    先导个zxing.jar包 下面是xml布局 activity_main.xml <RelativeLayout xmlns:android="http://schemas.andro ...

  2. jquery.qrcode二维码插件生成彩色二维码

    jquery.qrcode.js 是居于jquery类库的绘制二维码的插件,用它来实现二维码图形渲染支持canvas和table两种绘图方式. (jquery.qrcode.js 设置显示方式为tab ...

  3. 编写生成彩色验证码的Servlet

    利用Ajax实现无刷新的彩色验证码时,也需要编写一个名称为PictureCheckCode.java的Servlet,该类继承HttpServlet,主要通过service()方法生成验证码. 下面将 ...

  4. 前端特效： 使用CSS生成的闪光照相机效果

    使用纯CSS生成的照相机效果, 相关CSS代码如下: .container { position: absolute; top: 50%; left: 50%; -webkit-transform: ...

  5. css之单边阴影

    css之单边阴影 需求:在网上找的其他博客上说单边阴影需要牺牲掉模糊,实际上牺牲掉模糊直接用border不就好了 效果: 原理: 1.在左边的外阴影就是右边的内阴影 2.将box-shadow写在be ...

  6. css实现动态阴影、蚀刻文本、渐变文本

    css实现动态阴影 创建与类似的阴影box-shadow 而是基于元素本身的颜色. 代码实现: <div class="dynamic-shadow-parent"> ...

  7. CSS生成内容

    在Web中插入内容,在CSS2.1时代依靠的是JavaScript来实现.但进入CSS3进代之后我们可以通过CSS3的伪类“:before”,“:after”和CSS3的伪元素“::before”.“ ...

  8. CSS之弧形阴影

    简述 网页上经常会出现一些弧形的阴影效果,看起来很漂亮,下面我们来讲述下如何用CSS来实现一个弧形阴影. 简述 阴影 效果 注释 标题 效果 源码 合并 效果 源码 阴影 效果 首先实现一个简单的阴影 ...

  9. 酷炫，用Html5/CSS实现文字阴影

    前两天有一个学html5前端小美女问我一个有关文字阴影的效果怎么去实现.她和我说文字阴影嘛,她也知道text-shadow,.但是却做不出想要的样子,其实css3的新功能是很强大的,不要把你的思想太过 ...

随机推荐

  1. TCP/IP 5层协议簇/协议栈

    TCP/IP 5层协议簇/协议栈 数据/PDU 应用层 PC.防火墙 数据段/段Fragment 传输层 防火墙 报文/包/IP包packet 网络层 路由器 帧Frame 数据链路层 交换机.网卡 ...

  2. 深度学习之逻辑回归的实现 -- sigmoid

    1 什么是逻辑回归 1.1逻辑回归与线性回归的区别: 线性回归预测的是一个连续的值,不论是单变量还是多变量(比如多层感知器),他都返回的是一个连续的值,放在图中就是条连续的曲线,他常用来表示的数学方法 ...

  3. 给App加上音频编辑功能，让你的用户Show起来

    如今短视频当道,BGM无处不在,用户在每个能秀的地方都想要加上个性表达的音频.作为一个开发者,需不断探索和迎合用户的行为喜好,音频编辑功能成为用户在编辑个人信息.内容创作.生活分享等场景下的必需品. ...

  4. Junit测试用例配置Log4j

    用Junit测试非常方便,但有时我们想要看日志来方便排除,使用spring+log4j时,用Junit测试看日志很多人都不太会,即如何将Junit与log4j进行整合. 我也是研究了半天,才终于找到了 ...

  5. 一次搞懂JavaScript对象

    索引 目录 索引 1. 对象与类 2.对象使用 2.1 语法 2.2 属性 3.对象特性 4.对象的创建 4.1 字面量 4.2 工厂函数 4.3 构造函数 4.4 class类 4.5 对象与单例模 ...

  6. POJ2482 Stars in Your Window 题解

    Fleeting time does not blur my memory of you. Can it really be 4 years since I first saw you? I stil ...

  7. Word中的代码怎样语法高亮

    在平常我们粘贴代码到Word中的时候,经常会遇到代码粘贴到Word中后没有语法高亮,看着很乱很不友好,Word自带的样式---语法使用着也不尽人意, 网上有很多做法可以使得在插入在Word中的代码能够 ...

  8. Spring Boot的MyBatis注解：@MapperScan和@Mapper（十七）

    1.Spring Boot与MyBatis融合的矛盾问题: Spring家族的使命就是为了简化而生,但是随着Spring的发展壮大,有点事与愿违了.为了坚持初心,Spring家族祭出了一大杀器---S ...

  9. ASM入网小助手卸载

    目录 ASM小助手卸载 写在前的 卸载 解除U盘禁用 写在后的 ASM小助手卸载 写在前的 有些公司内网的上网认证是用的ASM小助手,不过有时候用自己电脑接入公司内网可能会主动下载到ASM入网小助手的 ...

  10. 01_什么是BS结构，什么是CS结构？

    C/S和B/S都是互联网中常见的网络结构模型. 一.什么是C/S模型? C是英文单词"Client"的首字母,即客户端的意思,C/S就是"Client/Server&qu ...