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. File FileStream StreamReader StreamWriter C#

    存在各种各样的IO设备,比如说文件File类(字符串文件和二进制文件),可以直接使用File类对文件进行读写操作. 这些各种IO的读取和写入是通过流的形式实现的,基类为Stream,针对各种不同的IO ...

  2. testdisk修复文件系统

    故障修复步骤: 1. 检查磁盘分区级文件系统确实不在: 2. 云主机内部下载testdisk工具修复 yum install testdisk -y 3. 执行命令testdisk /dev/vdc进 ...

  3. Java将其他数据类型转换成JSON字符串格式

    Student.java package com.demo.servlet; import java.util.List; import java.util.Map; public class Stu ...

  4. [AT2268] [agc008_f] Black Radius

    题目链接 AtCoder:https://agc008.contest.atcoder.jp/tasks/agc008_f 洛谷:https://www.luogu.org/problemnew/sh ...

  5. PHP中文字符gbk编码与UTF-8编码的转换

    通常PHP中上传文件,如果文件名称有中文字符,上传之后的名称是无法写入到本地的,因为上传来的编码格式一般是UTF-8的格式,这种格式是无法给文件命名并且存储到操作系统磁盘.在写入之前需要将其转换为gb ...

  6. 使用wmic.exe绕过应用程序白名单（多种方法）

      一.Wmic.exe wmic实用程序是一款Microsoft工具,它提供一个wmi命令行界面,用于本地和远程计算机的各种管理功能,以及wmic查询,例如系统设置.停止进程和本地或远程运行脚本.因 ...

  7. C++继承与组合的区别

    C++程序开发中,设计孤立的类比较容易,设计相互关联的类却比较难,这其中会涉及到两个概念,一个是继承(Inheritance),一个是组合(Composition).因为二者有一定的相似性,往往令程序 ...

  8. HEOI 2017 游记

    HEOI2017也算是落下帷幕了,那就写一篇 流水账 游记好了. DAY 0 又是熟悉的大学,又是熟悉的机房 YD宾馆的房间依旧破的不行. 晚上在房间颓颓颓....=.= DAY 1 上午去试机,唯一 ...

  9. 团体程序设计天梯赛 L1-010. 比较大小

    测试数据: 1 2 3 1 3 2 2 1 3 2 3 1 3 1 2 3 2 1 Code: 先确定最小,然后确定第二小 #include <stdio.h> #include < ...

  10. Linux运维四：文件属性及文件权限

    一:文件属性 我们使用ls -lhi命令来查看文件时,会列出一堆的文件属性,如: [root@Gin day7]# ll -hi total 7.8M 260674 -rw-r--r-- 1 root ...