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. 使用 Idea 打 scala程序的 jar 包 - 02

    Artifact ——>+  ——>JAR ——>From modules with dependencies 选择 Module,选择主函数,OK——>OK 勾选Includ ...

  2. Embarcadero Delphi 7 Enterprise 7.0.4.453 中文版

    在 win7下可能报错请大家按下面的方式 delphi7运行不正常的提示unable to rename'c:\program files\Borland\delphi7\Bin\delphi32.$ ...

  3. cnblog博客CSS定制

    一.页面定制CSS #home { margin: 0 auto; width: 80%;/*原始65*/ min-width: 980px;/*页面顶部的宽度*/ background-color: ...

  4. 一文总结之MyBatis

    目录 MyBatis 目标 MyBatis演示 Configuration.xml 映射文件 初始化配置文件 Dao Spring与MyBatis集成 pom Spring配置文件 MyBatis配置 ...

  5. There is no getter for property named 'notice' in 'class com.game.domain.Notices'

    在插入数据时报错:There is no getter for property named 'notice' in 'class com.game.domain.Notices' 四月 11, 20 ...

  6. 测试人员如何"提问"

    本文打算谈谈QA如何高质量的“提问”   写这些的初衷其实比较简单,作为一个测试老鸟,加入了一些很有质量的测试圈子,也在不同的公司带过不少新人,常常会碰到低效率的“提问”,主要表现如下:   1.问题 ...

  7. 适用于Rick的奖惩体系

    适用于Rick的奖惩体系 虽然对于时间有了更加清晰的认知,但是在时间管理方面还是不够严格,源于对自身的放松要求以及不够自律.第二个是周期性的思想松懈,比如周五了,想着马上周末了. 今天中午洗碗的时候, ...

  8. mysql测试索引在表中的作用

    //未完成 参考书:(完成对缓存中执行计划的查看对比 P133~) Microsoft SQL Server 2008技术内幕:T-SQL查询 实验内容 单表中的索引使用 1．建表 create ta ...

  9. Theme Section HDU - 4763（些许暴力）

    题意: 求出最长公共前后缀 不能重叠  而且 这个前后缀 在串的中间也要出现一次 解析: 再明确一次next数组的意思:完全匹配的最长前后缀长度 求一遍next 然后暴力枚举就好了 #include ...

  10. 【刷题】BZOJ 1969 [Ahoi2005]LANE 航线规划

    Description 对Samuel星球的探险已经取得了非常巨大的成就,于是科学家们将目光投向了Samuel星球所在的星系--一个巨大的由千百万星球构成的Samuel星系. 星际空间站的Samuel ...