通常用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. CF1539A Contest Start[题解]

    Contest Start 题目大意 有 \(n\) 个人报名参加一个比赛,从 \(0\) 时刻开始每隔 \(x\) 分钟有一个人开始比赛,每个人参赛时间相同,均为 \(t\) .定义一个选手的不满意 ...

  2. MyBatis学习笔记(一):MAVEN的下载,安装与环境配置和在IDEA中配置maven

    一.下载 官网下载 :http://maven.apache.org/download.cgi 网速慢的也可以下载我配置好的国内阿里云仓库的.以下以我配置好的为例: 下载链接:https://pan. ...

  3. 用 SwiftUI 五天组装一个微信

    GitHub 链接:SwiftUI-WeChatDemo 效果图 实装内容 4 个 Tab 页面 + 聊天界面,使用纯 SwiftUI 搭建而成 应用启动界面 Launch Screen 国际化及应用 ...

  4. java面向对象(下)-抽象类

    抽象类和抽象方法 抽象类和抽象方法必须使用abstract修饰符来定义,有抽象方法的类只能被定义成抽象类,抽象类里可以没有抽象方法 抽象类和抽象方法的规则如下 1.抽象类和抽象方法必须要用abstra ...

  5. python -- 面向对象编程(属性、方法)

    一.属性 对象的属性(attribute)也叫做数据成员(data member). 如果想指向某个对象的属性,可以使用格式: object.attribute 属性又分为:私有属性和公有属性. 私有 ...

  6. MySql存储过程的创建与使用及在thinkphp中如何调用笔记

    学习sql的存储过程,笔记总结如下: MySQL默认将分号,即";"作为语句的分隔符.如果是这样的话,则一个存储过程将很难正常创建,因为它的BEGIN和END之间可以是任意数量的S ...

  7. 离线安装rpm包并解决依赖(升级vsftpd为例)

    背景  实际开发中,我们的linux服务器是处理离线状态的,并不能访问互联网.如果此时要在linux上安装或者升级软件,就只能通过rpm包的安装方式.rpm包安装有一个缺陷,就是不能处理安装包的依赖问 ...

  8. 【LeetCode】面试题62. 圆圈中最后剩下的数字

    题目:面试题62. 圆圈中最后剩下的数字 这题很有意思,也很巧妙,故记录下来. 官方题解思路,是约瑟夫环的数学解法: 我们将上述问题建模为函数 f(n, m),该函数的返回值为最终留下的元素的序号. ...

  9. jquery 对HTML标签的克隆、删除

    <table width="100%" class="table_form"> <tr> <td>奖励深度(<a hr ...

  10. jquery 阻止表单提交方法

    <form name="message_form" action="?m=mobilecenter&c=index&a=service" ...