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. SET ANSI_NULLS ON，SET NOCOUNT ON，SET QUOTED_IDENTIFIER ON

    SET ANSI_NULLS ONTransact-SQL 支持在与空值进行比较时,允许比较运算符返回 TRUE 或 FALSE. 通过设置 ANSI_NULLS OFF 可将此选项激活.当 ANSI ...

  2. ZOJ3733_Skycity

    这...水题.可惜坑了无数发. 显然对于当前的半径的园,多边形的边数越多,周长越短,面积也就越小. 一开始我是用二分去做的,事实证明也是可以的,只是我坑了. 其实没必要去用二分哦,这样来考虑这问题. ...

  3. rabbitmq .erlang.cookie文件疑惑

    1.安装方式常见的rabbitmq安装方式有两种:rpm安装和二进制安装(编译安装). 2..erlang.cookie是什么.erlang.cookie是erlang实现分布式的必要文件,erlan ...

  4. Linux中的防火墙----iptables

    防火墙,它是一种位于内部网络与外部网络之间的网络安全系统.一项信息安全的防护系统,依照特定的规则,允许或是限制传输的数据通过. 防火墙根据主要的功能可分为网络层防火墙.应用层防火墙.数据库防火墙. 网 ...

  5. 【Cf #299 C】Tavas and Pashmaks（单调栈，凸性）

    一个经典的二维数点模型,如果某个人 $ x $ 两个速度都比另一个人 $ y $ 大,显然 $y$ 是不可能成为winner的. 但这里只考虑两个人$x$,$y$在两个属性各有千秋的时候,一定存在正整 ...

  6. WEB入门.九 导航菜单

    学习内容 水平导航菜单 垂直导航菜单 下拉式导航菜单 能力目标 制作tab标签导航菜单 制作带箭头的导航菜单 制作带信息提示的导航菜单 制作垂直下拉导航菜单 制作水平下拉导航菜单 本章简介 上一章节中 ...

  7. Android O 正式版新功能

    ref: Android O新特性和行为变更总结zzhttp://www.cnblogs.com/bluestorm/p/7148134.html Android O正式版带来了诸多新功能,如Tens ...

  8. View 的setTag() 和 getTag()

    View 的setTag() 和 getTag()ImageView.setTag(""); 就是当多个ImageView用到一个监听器时,能触发不同的情况,是View的方法 Ad ...

  9. 解题：洛谷 p1858 多人背包

    题面 设$dp[i][j]$表示容量为$i$时的第$j$优解,因为是优解,肯定$dp[i][j]$是随着$j$增大不断递减的,这样的话对于一个新加进来的物品,它只可能从两个容量的转移的前$k$优解中转 ...

  10. 解题：洛谷2633 Count on a tree

    题面 在树上建主席树...... 每个点从父亲那里建过来,最后建出来就是从根到$i$这条链上的主席树,查询的时候一边差分一边查询 ($cmt[u]+cmt[v]-cmt[lca(u,v)]-cmt[a ...