通常用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. git rebase(变基)操作

    1.rebase(变基)操作 注意事项:rebase 改变分支的根源,绝对不要在与其他人共享的分支上进行操作rebase黄金法则:绝不要在公共的分支上使用它! 1.1git merge 与 git r ...

  2. .Net Core微服务——服务发现：Consul（一）

    先思考一些问题:它是做什么的.以及怎么使用它.带着这些问题往下走. consul是做什么的 consul用于微服务下的服务治理.服务治理是什么?它包含但不限于:服务发现.服务配置.健康检查.键值存储. ...

  3. （精）题解 guP2860 [USACO06JAN]冗余路径Redundant Paths

    (写题解不容易,来我的博客玩玩咯qwq~) 该题考察的知识点是边双连通分量 边双连通分量即一个无向图中,去掉一条边后仍互相连通的极大子图.(单独的一个点也可能是一个边双连通分量) 换言之,一个边双连通 ...

  4. android体温登记APP开发过程+问题汇总+源码

    源码上传至https://github.com/durtime/myproject下的temperature 实际效果:   开发过程 1.首先进行布局文件的编写,布局前台页面 2.布置两个按钮,一个 ...

  5. Flyway使用说明

    Flyway简介 Flyway是源自Google的数据库版本控制插件.项目开发中,数据库往往需要随着软件版本进行变化,相比起手动执行SQL脚本,flyway可以实现自动化的数据库版本修改,让开发/测试 ...

  6. CF175E Power Defence

    CF175E Power Defence 题意 一个塔防游戏:给定一个无限长的数轴,一个无限血的敌人要从正无穷走到负无穷.你的任务是放置三种塔,包含两种攻击塔和一种寒冰塔,使得敌人受到的伤害最大. 其 ...

  7. springboot多个service互相调用的事务处理（十三）

    在一个service的方法A中,调用另一个service的方法B,方法A和方法B均存在数据库插入操作,需要添加如下配置: @Transactional(rollbackFor = Exception. ...

  8. 从零开始的Java RASP实现(一)

    目录 0 从零开始的Java RASP实现(一) 1 javaagent 1.1 Main方法启动前 概念介绍: 如何使用 创建agent 创建main 1.2 JVM启动后 attach机制 启动一 ...

  9. springmvc学习指南 之---第25篇 Spring Bean有三种配置方式

    writed by不要张艳涛, 从tomcat转到了springmvc 现在开始有点不知道该看什么书了,看完了springmvc 学习指南之后 又查了一些书,好多都是内容相近,在找书的过程之中,发现s ...

  10. 基于arduino UNO R3+ESP8266控制LED灯的开关（无USB转TTL工具实现）

    最近由于项目要求,需要开发物联网云平台,而本人对硬件和通信技术一窍不通,故而选择arduino这一简单单片机来实现学习掌握基础的硬件和通信技术. 下面就是本人通过查阅大佬资料做的一个整合版本的通过手机 ...