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. Java面试题大汇总

    前言 关于赢在面试的Java题系列基本收集整理完成了,所有题目都是经过精心挑选的,很基础又考验求职者的基本功,应该说被面试到的几率很大.这里整理挑选出来供大家面试前拿来看一看,所有题目整理自网络,有一 ...

  2. Girls' research HDU - 3294(马拉车水题)

    题意: 求最长回文串 长度要大于等于2  且输出起点和终点  输出回文串字符 这个字符还是要以给出的字符为起点a 输出 解析: 分析一下s_new串就好了 #include <iostream& ...

  3. http请求头、响应头文件详解

    HTTP Request Header 请求头   解释 示例 Accept 指定客户端能够接收的内容类型 Accept: text/plain, text/html Accept-Charset 浏 ...

  4. P4051 [JSOI2007]字符加密 解题报告

    P4051 [JSOI2007]字符加密 题目描述 喜欢钻研问题的JS 同学,最近又迷上了对加密方法的思考.一天,他突然想出了一种他认为是终极的加密办法:把需要加密的信息排成一圈,显然,它们有很多种不 ...

  5. VS2010 重命名文件：源文件名和目标文件名相同 的解决方案

    想要在“”解决方案资源管理器“”中修改一个已经写好的文件的文件名,如图: 在改了几次后就出现了如图的问题: 然而在“解决方案资源管理器”中并没有看到,于是我打开了工程在磁盘中的位置文件夹: 意外发现了 ...

  6. bzoj 3667 Rabin-Miller算法

    #include<iostream> #include<cstdio> #include<algorithm> #include<cstring> #i ...

  7. Qt 查找功能

    版权声明 该文章原创于Qter开源社区(www.qter.org),作者yafeilinux,转载请注明出处!     导语 这一篇我们来加上查找菜单的功能.因为要涉及Qt Creator的很多实用功 ...

  8. boost::asio::deadline_timer(理解)

    并发与并行: 并发和并行从宏观上来讲都是同时处理多路请求的概念.但并发和并行又有区别,并行是指两个或者多个事件在同一时刻发生:而并发是指两个或多个事件在同一时间间隔内发生. 1.Timer.1 - 使 ...

  9. 使用 mysql-proxy 监听 mysql 查询

    什么是 mysql-proxy? mysql-proxy是mysql官方提供的mysql中间件服务,上游可接入若干个mysql-client,后端可连接若干个mysql-server. 它使用mysq ...

  10. 【Asp.net入门09】第一个ASP.NET 应用程序-处理窗体(1)

    我们创建了一个HTML窗体,可以通过它显示受邀参加晚会的嘉宾,但是,当嘉宾单击Submit RSVP按钮时,同一个页面会反复多次显示.为了解决此问题,需要实现一段代码,用于在将窗体数据发布到服务器时执 ...