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. Window环境下搭建Vue.js开发环境

    原文链接:http://blog.csdn.net/solo95/article/details/72084907 笔者最近在进行前端的学习,在点完了HTML5.CSS3.JavaScript等技能树 ...

  2. springboot学习笔记-3 整合redis&mongodb

    一.整合redis 1.1 建立实体类 @Entity @Table(name="user") public class User implements Serializable ...

  3. NOIP赛前集训营-提高组（第一场）#A 中位数

      题目描述 小N得到了一个非常神奇的序列A.这个序列长度为N,下标从1开始.A的一个子区间对应一个序列,可以由数对[l,r]表示,代表A[l], A[l + 1], ..., A[r]这段数.对于一 ...

  4. PowerDesigner在生成SQL时报错Generation aborted due to errors detected during the verification of the mod

    一.本章节要用到  ODBC连接数据库直接创建表,请先创建连接库的ODBC 请参考  新建  http://www.cnblogs.com/wdw31210/p/7580286.html 二.生成 去 ...

  5. UILabel居中显示的方法

    在IB中拖出一个UIView @IBOutlet weak var myView: UIView! 下面创建的UILabel是在myView中居中显示 方法1: var label = UILabel ...

  6. 【Cf #503 B】The hat（二分）

    为什么Cf上所有的交互题都是$binary \; Search$... 把序列分成前后两个相等的部分,每一个都可以看成一条斜率为正负$1$的折线.我们把他们放在一起,显然,当折线的交点的横坐标为整数时 ...

  7. Android Intent 总结

    //打开指定网页Intent intent = new Intent(Intent.ACTION_VIEW);intent.setData(Uri.parse("http://www.goo ...

  8. PHP正则表达式基本语法

    本章主要学习正则表达式的基本语法: 正则表达式就是一个匹配的模式,正则表达式本身也就是一个字符串(有一些语法规则,特殊符号组成) 正则表达式这个字符串一定要在对应的函数中使用才有意义(分割,替换函数结 ...

  9. UVALive 7505 Hungry Game of Ants (2015Ecfinal)

    题意: 长度是n的线段上点的编号从1~n,每个点有一只蚂蚁蚂蚁的体重等于该点的编号,最初每只蚂蚁可以选择向右走或者向左走两只蚂蚁相遇时体重大的吃掉体重小的并且体重增加为两只的体重和,走到边界时掉头,问 ...

  10. bcdiv bcmul

    /** * 分 转为 钱 */public static function cent2yuan($price) { return bcdiv($price,100,2);} /** * 元 转为 分 ...