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. NOIP2017 心路历程

    虽然没能去考试,但是在学弟们考试前后也发生了很多事情. 周四晚上.学弟们出发前最后一天.单独找几个人谈了谈.面对退役他们还是有点慌啊.这个时候给他们调整心态或许有点迟了. 21:45.最后一分钟.为他 ...

  2. 修改pip源到国内的镜像源

    国内网络原因,经常无法访问一些技术网站,pypi.python.org就是其中一个.所以,使用pip给Python安装软件时,经常出现错误.like this: File "/usr/lib ...

  3. 在CentOS中安装与配置SVN的方法

    安装说明系统环境:CentOS-6.4安装方式:yum install (源码安装容易产生版本兼容的问题)安装软件:系统自动下载SVN软件 1.检查已安装版本 #检查是否安装了低版本的SVN[root ...

  4. UIScrollView浏览一组图片，且图片与图片之间有间隔

    ---恢复内容开始--- UIScrollView是可以浏览一组view的,只要将其属性 pagingEnabled设置为true就可以了.具体过程是这样的, 1:将一组图片按照从左到右的顺序添加到U ...

  5. 【BZOJ4006】管道连接（动态规划，斯坦纳树）

    题面 BZOJ 洛谷 题解 和这题区别不是很大吧. 基本上拿过来改一下就做完了. #include<iostream> #include<cstdio> #include< ...

  6. 滥用DNSAdmins权限进行Active Directory提权

      0x00 前言 除了在实现自己的DNS服务器功能之外,Microsoft还为该服务器实现自己的管理协议以便于管理与Active Directory域集成.默认情况下,域控制器也是DNS服务器; 大 ...

  7. python检测服务器是否ping通

    好想在2014结束前再赶出个10篇博文来,~(>_<)~,不写博客真不是一个好兆头,至少说明对学习的欲望和对知识的研究都不是那么积极了,如果说这1天的时间我能赶出几篇精致的博文,你们信不信 ...

  8. .net 控件开发常见的特性总结

    http://blog.csdn.net/aofengdaxia/article/details/5924364 在.net开发中常常需要使用一些[]里面的特性描述,我发现对常用的几个知道大概的意思, ...

  9. Python pytagcloud 中文分词 生成标签云 系列（一）

    转载地址:https://zhuanlan.zhihu.com/p/20432734工具 Python 2.7 (前几天试了试 Scrapy 所以用的 py2 .血泪的教训告诉我们能用 py3 千万别 ...

  10. ppp协议介绍(转)

    原文:https://www.cnblogs.com/gtarcoder/p/6259105.html PPP协议PPP协议是二层(数据链路层)协议,常用于拨号上网时客户端向服务器获取IP地址.PPP ...