通常用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. Codeforces Round #139 (Div. 2) 题解

    vp上古场次ing CF225A Dice Tower 1.题目简述: 有 \(n\) 个骰子被叠在了一起.对于每个骰子上的一个数,与它对面的数的和始终为 \(7\) . 你是小明,你只能从正面看这个 ...

  2. postman使用笔记

    postman主要是用来做接口测试的工具,用来模拟客户端向服务器发起请求. 一.postman支持的请求类型 1.get请求 get请求是用来向服务器获取数据 get请求没有请求体,只有url和请求头 ...

  3. Java基础00-面向对象基础13

    1. 类和对象 1.1 什么是对象 1.2 什么是面向对象                1.3 什么是类 1.4 什么是对象的属性 1.5 什么是对象的行为 行为就是对象能够干什么 1.6 类和对象 ...

  4. 虚拟机安装的kali操作系统实现共享文件夹

    虚拟机共享文件夹设置. 1.[虚拟机]-->[设置] 2.先在本地新建一个共享文件夹,然后将此文件夹的路径添加到虚拟机 3.进入kali操作系统,运行命令sudo vmhgfs-fuse .ho ...

  5. Windows下删除顽固文件夹

    参考链接: https://www.cnblogs.com/azbane/p/9808802.html 第一步:修改当前文件夹所有者为管理员 takeown /f * /a /r 第二步:修改管理员权 ...

  6. 误改win10下的windowsapps文件夹权限，导致自带应用闪退问题

    在项目中,为了获得相关应用的具体位置(office的具体exe位置),修改了文件夹WindowsApps权限,导致所有自带应用打开闪退. 通过搜索相关资料,获得解决方法: 重置该文件的权限设置 ica ...

  7. .NET 6 预览版 5 发布

    很高兴.NET 6 预览版5终于跟大家见面了.我们现在正处于.NET 6 的后半部分,开始整合一些重要的功能. 例如.NET SDK 工作负载,它是我们.NET 统一愿景的基础,可以支持更多类型的应用 ...

  8. netty系列之:netty初探

    目录 简介 netty介绍 netty的第一个服务器 netty的第一个客户端 运行服务器和客户端 总结 简介 我们常用浏览器来访问web页面得到相关的信息,通常来说使用的都是HTTP或者HTTPS协 ...

  9. 【Azure 应用服务】App Service 运行状况健康检查功能简介 (Health check)

    通过Azure App Service门户,启用Health Check来监视应用服务的实例,当发现其中一个实例处于不健康(unhealthy)状态时,通过重新路由(即把有问题的实例从负载均衡器中移除 ...

  10. SpringCloud升级之路2020.0.x版-6.微服务特性相关的依赖说明

    本系列代码地址:https://github.com/HashZhang/spring-cloud-scaffold/tree/master/spring-cloud-iiford spring-cl ...