底部投影
box-shadow: 0 5px 4px -4px black;

底部右侧投影

3px 3px 6px -3px black

两侧投影

box-shadow: 7px 0 7px -7px black,
-7px 0 7px -7px black;

不规则投影

不规则图像直接写box-shadow: 2px 2px 10px black;的话会出现如下效果,这并不是我们想要的,


(不规则的图案详细的css写法可以参考https://www.cnblogs.com/yhhBKY/p/10642696.html )

filter: drop-shadow(3px 3px 3px rgba(0,0,0,.5));
drop-shadow()滤镜可接受的参数基本跟box-shadow属相一样的,但不包括扩张半径,不包括inset关键字,也不支持逗号分割的多层投影语法
 

气泡框

用box-shadow写的话图片是这样。肯定不符合我们的需求

下面的写法就完美解决了问题
.one{
width: 100px;
height: 100px;
background: yellowgreen;
margin: 0 auto;
position: relative;
border-radius: .5em;
filter: drop-shadow(2px 2px 3px black);
}
.one:before{
content: '';
position: absolute;
top: 20px;right: -10px;
width: 20px;
height: 20px;
background: yellowgreen;
transform: rotate(45deg);
z-index: -1;
}

box-shadow单侧投影,双侧投影,不规则图案投影的更多相关文章

  1. JAVA 链表操作:单链表和双链表

    主要讲述几点: 一.链表的简介 二.链表实现原理和必要性 三.单链表示例 四.双链表示例 一.链表的简介 链表是一种比较常用的数据结构,链表虽然保存比较复杂,但是在查询时候比较便捷,在多种计算机语言都 ...

  2. 数据结构图文解析之:数组、单链表、双链表介绍及C++模板实现

    0. 数据结构图文解析系列 数据结构系列文章 数据结构图文解析之:数组.单链表.双链表介绍及C++模板实现 数据结构图文解析之:栈的简介及C++模板实现 数据结构图文解析之:队列详解与C++模板实现 ...

  3. 在单链表和双链表中删除倒数第K个节点

    [说明]: 本文是左程云老师所著的<程序员面试代码指南>第二章中“在单链表和双链表中删除倒数第K个节点”这一题目的C++复现. 本文只包含问题描述.C++代码的实现以及简单的思路,不包含解 ...

  4. 织梦dedecms单标签、双标签

    标签是dedecms的核心,dedecms的标签也跟html标签一样,同样分单标签和双标签. 我不会讲单标签有那些,双标签有那些,也不会叫大家去背那些是单标签,那些是双标签.如果去背这些标签,这样学起 ...

  5. css中的单冒号和双冒号

    最近突然被别人问起css单冒号和双冒号有什么区别,答曰:"不知道". 虽然还在填坑中,但作为一个跨过了初级的FEer,感觉着实汗颜,刚好今天下午在搜别的问题的时候,突然看到一个对比 ...

  6. python单引号(')、双引号(")、三引号(''',""")

    python对字符串的表示方法比c更有灵活性,但是也更难理解. 为了在平时使用.看代码过程中对着单引号(').双引号(").三引号(''',""")不混淆,知道 ...

  7. 每日linux命令学习-引用符号(反斜杠\,单引号'',双引号"")

    引用符号在解析器中保护特殊元字符和参数扩展,其使用方法有3种:反斜杠(\),单引号(’‘),双引号(“”). 单引号和双引号必须匹配使用,均可在解析器中保护特殊元字符和通配符,但是单引号(硬转义)主要 ...

  8. prometheus的平台侧和应用侧结合,实现应用的metrics的抓取

    这个细节,迷惑了我一段时间,前面也写过一篇blog,描述过这个问题. 今天看到一种更好的解决方法. 记录一下. prometheus在k8s集群里,抓取应用的metrics. 是需要平台侧和应用侧相互 ...

  9. Keepalived LVS-DR单网络双活双主配置模式

    Keepalived LVS-DR单网络双活双主配置模式 Linux就该这么学 今天 LVS是Linux Virtual Server的简写,意即Linux虚拟服务器,是一个虚拟的服务器集群系统.LV ...

随机推荐

  1. Linux下设置Core文件生成路径及文件名

    修改core dump文件路径:  方法1:临时修改: 修改/proc/sys/kernel/core_pattern文件/proc目录本身动态加载每次系统重启都会重新加载因此种方法只能作临时修改/p ...

  2. python操作xls表

    1.python读取excel中单元格内容为日期的方式 python读取excel中单元格的内容返回的有5种类型,即上面例子中的ctype: ? 1 ctype : 0 empty,1 string, ...

  3. 【记录】linux中不同颜色代表的含义

    下面是linux约定不同类型文件默认的颜色 白色:表示普通文件 蓝色:表示目录 绿色:表示可执行文件 红色:表示压缩文件 浅蓝色:链接文件 红色闪烁:表示链接的文件有问题 黄色:表示设备文件 灰色:表 ...

  4. Begin at this time

    学习了一段时间的Python,今天终于下定决心建立博客来记录自己的机器学习之路了.希望这是一个好的开始,希望自己永远不放弃,坚持努力下去.

  5. 微信小程序分享功能的path路径

    表示被微信小程序坑惨了 糟心的开始写,老板说先不上太复杂,就先显示了两个页面,然后开开心心的发布,测试了几遍,没啥问题呀.结果,一上上去,就被老板批了! 啥呀! 这分享怎么这个鬼样子!明明我看文档都是 ...

  6. express 的路由学习

    使用步骤 - :获取路由中间件对象 `let router = express.Router();` - :配置路由规则 `router.请求方式(URL,fn事)` - fn中参数有req,res, ...

  7. centos 7.6安装python3环境

    Centos7安装Python3的方法   由于centos7原本就安装了Python2,而且这个Python2不能被删除,因为有很多系统命令,比如yum都要用到. [root@VM_105_217_ ...

  8. vue组件实例的生命周期

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. html根标签设置font-size为100px,使用rem,body没设置字体大小

    今天使用了rem来写样式,前提是要给html设置font-size:100px;这样在计算比例时相对方便点:结果在将一个span标签设置为display:inline-block;时发现span不能能 ...

  10. 每天一个Linux命令:mkdir(4)

    mkdir mkdir命令 用来创建指定的名称的目录,要求创建目录的用户在当前目录中具有写权限,并且指定的目录名不能是当前目录中已有的目录 格式 mkdir [选项] [目录..] 参数选项 参数 备 ...