box-shadow: 0px -15px 10px -15px #111;

五个值分别为：x y blur spread color

将 spread 设置成 blur 的负值即可

这种只适用于 offset 和 blur 相差比较小的情况，相差太大的话效果不是很好

see:

1. StackOverflow

2. codepen

CSS 实现单边阴影的更多相关文章

  1. css之单边阴影

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

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

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

  3. CSS3 box-shadow 效果大全（内阴影，外阴影，三边阴影，双边阴影，单边阴影，细线描边…）

    /* offset-x | offset-y | color */ box-shadow: 60px -16px teal; /* offset-x | offset-y | blur-radius ...

  4. CSS之弧形阴影

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

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

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

  6. css border 三角形阴影(不规则图形阴影) & 多重边框的制作

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! border 的组合写法 border:border-width border-style border- ...

  7. CSS实现文字阴影的效果

    CSS中有两种阴影效果,一种是DropShadow(投影),另一种是Shadow(阴影).1.DropShadow语法:{FILTER:DropShadow(Color=color,OffX=offX ...

  8. css设置边框阴影;box-shadow的使用

    html代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  9. css生成彩色阴影

    通常用css生成单色或者同色系的的阴影(box-shadow),其实可以通过巧妙的利用 filter: blur 模糊滤镜,可以生成渐变色或者说是颜色丰富的阴影效果,如图: 原理: 利用伪元素,生成一 ...

随机推荐

  1. C语言版kafka消费者代码运行时异常kafka receive failed disconnected

    https://github.com/edenhill/librdkafka/wiki/Broker-version-compatibility如果使用了broker版本是0.8的话, 在运行例程时需 ...

  2. lepus天兔数据库监控

    本篇文章的前提是服务器装了mysql服务.git,我这边就不写出来了,自行百度,装下mysql服务,比较简单 一.安装LAMP基础环境 Xampp下载地址:https://www.apachefrie ...

  3. 第218天：Angular---模块和控制器

    1.使用NG实现双边数据绑定 所有需要ng管理的代码必须被包裹在一个有ng-app指令的元素中ng-app是ng的入口,表示当前元素的所有指令都会被angular管理(对每一个指令进行分析和操作) & ...

  4. service依赖dao的接口进行数据传输

    service依赖dao的接口进行数据传输

  5. MySql--学习成长过程

    MySql--学习成长过程 模拟测试: QQ数据库管理 一.创建数据库并添加关系和测试数据 1 ##创建QQ数据库,完成简单的测试 2 3 #创建数据库 4 DROP DATABASE IF EXIS ...

  6. Chrome神器Vimium快捷键学习记录

    今天下午折腾了一下Chrome下面的一个插件Vimium的使用,顿时发现该插件功能强大,能够满足减少鼠标的使用.至于为何要使用这个插件,源于我手腕上的伤一直没有好,使用鼠标的时候有轻微的疼痛.而且,由 ...

  7. 【BZOJ3884】上帝与集合的正确用法

    Description 一句话题意,给定\(p\)作为模数: \(p\le 10^7\),数据组数\(T\le1000\). Solution 看到就弃疗了,再见...... 将模数\(p\)拆分成\ ...

  8. 使用SUID二进制文件进行Linux权限升级技巧

      0x00 基础知识 众所周知,在Linux中一切都以文件存在,包括具有允许或限制三个执行操作(即读/写/执行)权限的目录和设备.因此,当给任何文件设置权限时,应该需要了解允许的Linux用户或限制 ...

  9. spring管理hibernate，mybatis，一级缓存失效原因

    mybatis缓存:一级缓存和二级缓存 hibernate缓存:一级缓存和二级缓存 关于缓存: 缓存是介于物理数据源与应用程序之间,是对数据库中的数据复制一份临时放在内存中的容器, 其作用是为了减少应 ...

  10. listview android:cacheColorHint,android:listSelector属性作用（转）

    ListView是常用的显示控件,默认背景是和系统窗口一样的透明色,如果给ListView加上背景图片,或者背景颜色时,滚动时listView会黑掉, 原因是,滚动时,列表里面的view重绘时,用的依 ...