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. Thinkphp面试问题

    1.如何理解TP中的单一入口文件? 答:ThinkPHP采用单一入口模式进行项目部署和访问,无论完成什么功能,一个项目都有一个统一(但不一定是唯一)的入口.应该说,所有项目都是从入口文件开始的,并且所 ...

  2. linux下安装java jdk

    第一步:查看java对应版本               yum search java 我自己装的是1.8版本的java包 第二步:装java包 yum install java-1.8.0-ope ...

  3. HDU4745——Two Rabbits——2013 ACM/ICPC Asia Regional Hangzhou Online

    这个题目虽然在比赛的时候苦思无果,但是赛后再做就真的是个水题,赤果果的水题. 题目的意思是给n个数构成的环,两只兔子从任一点开始分别顺逆时针跳,每次可以调到任意一个数(最多不会跳过一圈). 求最多能跳 ...

  4. C++模式学习------策略模式

    当遇到同一个对象有不同的行为,方法,为管理这些方法可使用策略模式. 策略模式就是对算法进行包装,是把使用算法的责任和算法本身分割开来.通常把一个系列的算法包装到一系列的策略类里面,这些类继承一个抽象的 ...

  5. Pscp与服务器文件传递

    1. 下载pscp.exe https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html 选择并下载pscp.exe 2. 执行cmd程 ...

  6. BZOJ2339 HNOI2011卡农（动态规划+组合数学）

    考虑有序选择各子集,最后除以m!即可.设f[i]为选i个子集的合法方案数. 对f[i]考虑容斥,先只满足所有元素出现次数为偶数.确定前i-1个子集后第i个子集是确定的,那么方案数为A(2n-1,i-1 ...

  7. Find First and Last Position of Element in Sorted Array - LeetCode

    目录 题目链接 注意点 解法 小结 题目链接 Find First and Last Position of Element in Sorted Array - LeetCode 注意点 nums可能 ...

  8. 【BZOJ3675】【Apio2014】序列分割

    Description 传送门 Solution ​ 之前我也遇到过一次这种"两段之和乘积作为贡献"的问题:考虑把这一种\((\sum) *(\sum)\)的形式拆括号,就可以发现 ...

  9. BZOJ3142 [Hnoi2013]数列 【组合数学】

    题目链接 BZOJ3142 题解 题意:选一个正整数和\(K - 1\)个\([1,M]\)中的数,使得总和小于等于\(N\),求方案数模\(P\) 题目中\(K(M - 1) < N\)的限制 ...

  10. 使用Githubdesktop管理Eclipse项目

    使用Githubdesktop管理Eclipse项目 觉得有用的话,欢迎一起讨论相互学习~[Follow] 方案 使用Eclipse创建项目,使用githubdesktop进行管理 项目右键, Tea ...