box-shadow单侧投影,双侧投影,不规则图案投影
底部投影
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单侧投影,双侧投影,不规则图案投影的更多相关文章
- JAVA 链表操作:单链表和双链表
主要讲述几点: 一.链表的简介 二.链表实现原理和必要性 三.单链表示例 四.双链表示例 一.链表的简介 链表是一种比较常用的数据结构,链表虽然保存比较复杂,但是在查询时候比较便捷,在多种计算机语言都 ...
- 数据结构图文解析之:数组、单链表、双链表介绍及C++模板实现
0. 数据结构图文解析系列 数据结构系列文章 数据结构图文解析之:数组.单链表.双链表介绍及C++模板实现 数据结构图文解析之:栈的简介及C++模板实现 数据结构图文解析之:队列详解与C++模板实现 ...
- 在单链表和双链表中删除倒数第K个节点
[说明]: 本文是左程云老师所著的<程序员面试代码指南>第二章中“在单链表和双链表中删除倒数第K个节点”这一题目的C++复现. 本文只包含问题描述.C++代码的实现以及简单的思路,不包含解 ...
- 织梦dedecms单标签、双标签
标签是dedecms的核心,dedecms的标签也跟html标签一样,同样分单标签和双标签. 我不会讲单标签有那些,双标签有那些,也不会叫大家去背那些是单标签,那些是双标签.如果去背这些标签,这样学起 ...
- css中的单冒号和双冒号
最近突然被别人问起css单冒号和双冒号有什么区别,答曰:"不知道". 虽然还在填坑中,但作为一个跨过了初级的FEer,感觉着实汗颜,刚好今天下午在搜别的问题的时候,突然看到一个对比 ...
- python单引号(')、双引号(")、三引号(''',""")
python对字符串的表示方法比c更有灵活性,但是也更难理解. 为了在平时使用.看代码过程中对着单引号(').双引号(").三引号(''',""")不混淆,知道 ...
- 每日linux命令学习-引用符号(反斜杠\,单引号'',双引号"")
引用符号在解析器中保护特殊元字符和参数扩展,其使用方法有3种:反斜杠(\),单引号(’‘),双引号(“”). 单引号和双引号必须匹配使用,均可在解析器中保护特殊元字符和通配符,但是单引号(硬转义)主要 ...
- prometheus的平台侧和应用侧结合,实现应用的metrics的抓取
这个细节,迷惑了我一段时间,前面也写过一篇blog,描述过这个问题. 今天看到一种更好的解决方法. 记录一下. prometheus在k8s集群里,抓取应用的metrics. 是需要平台侧和应用侧相互 ...
- Keepalived LVS-DR单网络双活双主配置模式
Keepalived LVS-DR单网络双活双主配置模式 Linux就该这么学 今天 LVS是Linux Virtual Server的简写,意即Linux虚拟服务器,是一个虚拟的服务器集群系统.LV ...
随机推荐
- vue.js实现点击后动态添加class及删除同级class
最近使用vue需要实现一个点餐选择商品规格的页面,需要通过vue动态的给被点击的元素添加class名字,使其变色,其他的删除class.如图: 开始在网上找了许多办法发现不是太好用,最后找到一个发现还 ...
- Spring Cloud配置中心客户端读取配置
微服务连接配置中心来实现外部配置的读取. 引入依赖 <dependencies> <dependency> <groupId>org.springframework ...
- Spring Cloud注册中心高可用搭建
Spring Cloud的注册中心可以由Eureka.Consul.Zookeeper.ETCD等来实现,这里推荐使用Spring Cloud Eureka来实现注册中心,它基于Netfilix的Eu ...
- 24-python基础-python3-浅拷贝与深拷贝(2)
4.copy 模块的 copy()和 deepcopy()函数 在处理列表和字典时,尽管传递引用常常是最方便的方法,但如果函数修改了传入的列表或字典,可能不希望这些变动影响原来的列表或字典.要做到 ...
- 解决code first Migration 增加外键时出现错误的问题
先上模型 Comment public class Comment { [Key] public int CommentId { get; set; } [Required] public int S ...
- rest framework之视图组件
一.APIView APIView继承的是和django中CBV模式下的View类.View类中的dispatch方法通过反射对不同的请求方法执行不同的函数.而APIView不仅拥有这个特性,而且重 ...
- ansible如何用root用户运行普通用户授权
ansible默认以root用户进行授权,但是需要用普通用户执行一些命令操作: 如: 1. ansible 10.0.0.1 -m raw -a "date" -u www 但是会 ...
- php高版本安装ecshop错误解决方法
1.Strict Standards: Non-static method cls_image::gd_version() should not be called statically in F:\ ...
- 生产环境用到的几个有用的Linux命令
有时候,几个有用的Linux命令可以很大的提高你的工作效率. 1.free -m 这个命令我暂时就只会这么使用,它可以查看服务器的内存资源 2.top 这个命令同样可以查看服务器的资源,当然我还是用它 ...
- java EE学习流程(第二版更新)
这周有点堕落了,这两天啥都没写,就顾上刷<庆余年>了