你不知道的阴影

我们在开发的时候,使用box-shadow添加阴影是这样的:

.img {width: 500px;height: 500px;display: block;box-shadow: 0 0 15px #333333;}

但是我们想给这个图片加阴影应该怎么加那(让UI做,我真聪明!) ,这时候css里有个属性就站出来说 我可以实现,他就是 filter, 之前我们在 纪念一些特殊日期,各大网站都会灰屏,就是用的这个属性 filter: grayscale(100%);

此外还有一个 drop-shadow 属性,它的作用是给图像设置一个阴影效果。阴影是合成在图像下面,可以有模糊度的,可以以特定颜色画出的遮罩图的偏移版本,让我来试试看:

.img {width: 500px;height: 500px;display: block;filter: drop-shadow(0 0 15px #333333)}

 这样,我们的阴影就可以放到图片的边缘了。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/30687.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Kali Hyper-V安装正常启动后 黑屏 只能进命令模式

问题: Hyper-V安装虚拟机Kali系统一切安装正常, 没有出现错误. 安装成功后重启,只能进入命令模式,tt1-tt6,进不去GUI桌面. 尝试: 一代二代虚拟硬盘都试过,同样问题,只能开进后进入命令模式,在命令模式下一切运行正常, 也修复过系统 GNOM等的,不管用. 以下为国外论坛给的建议,尝…

Centos7单机部署ElasticSearch

Centos7单机部署ElasticSearch 引言 Elasticsearch是一种广泛使用的开源搜索引擎,专门为分布式环境设计,但也可以在单机上运行。它使存储、搜索和分析大量数据变得更加容易和高效。此教程将引导你通过在Centos7上单机部署Elasticsearch,涵盖…

flutter项目给安卓打正式包 和升级版本号

1.首先把flutter项目里的android目录整个拖进android studo里,运行一下看看是否能运行 2.Build->Generate Signed Bundle/APK… 点击APK->Next 如果没有key酒店及Create new…就生成新的key 点击Key store path:右边的图标选择保存路径 选择保存的路径,并且在Save…

webpack基础知识二:说说webpack的构建流程?

一、运行流程 webpack 的运行流程是一个串行的过程,它的工作流程就是将各个插件串联起来 在运行过程中会广播事件,插件只需要监听它所关心的事件,就能加入到这条webpack机制中,去改变webpack的运作,使得整个系统扩展…

【Android NDK开发】Android Studio 编写 JNI (C++)代码无提示

随笔记 Android Studio在编写C代码时候,引入对应的头文件,Android Studio里却不提示对应的方法,需要在Studio中设置一下。 Mac中,选择 Android Studio > Preferences,选择Clangd >>Disable Clangd completio…

C++-排序

文章目录 常数操作时间复杂度空间复杂度O(N^2) O(1) 数据情况发生变化不影响流程 选择排序冒泡排序使用抑或运算提取出不为零的数最右边的1 1. 实现两个变量交换值2. 数组中一种数字出现奇数次,other是偶数次,找到那一种数字3. 数组中有两种数字出现奇数次,other是偶数次,找到那…

如何理解MySQL隔离性---3个记录隐藏字段、undo日志、Read View

目录 一、3个记录隐藏字段 二、undo 日志 三、read view 一、3个记录隐藏字段 本片文章是帮助理解上篇文章Mysql隔离性的辅助知识。 mysql在建表时,不仅仅创建了表的结构,还创建了3个隐藏字段。 DB_TRX_ID :6 byte,最近修改( 修…

iOS开发-JsonModel的学习及使用

IOS JsonModel的学习及使用 当我们从服务端获取到json数据后的时候,我们需要在界面上展示或者保存起来,下面来看下直接通过NSDictionary取出数据的情况。 NSDictionary直接取出数据的诟病。 NSString *name [self.responseObj objectForKey:"nam…

巧用Maya轴心操作技巧,让工作事半功倍!

Maya 是一款专业的三维软件,可以用于创建规模宏大的世界、复杂的角色和炫酷的特效。Maya的用户遍布动画行业、影视特效、广告和片头、平面设计行业,用户数量十分庞大。本文分享了maya轴心操作的小技巧,让设计师工作事半功倍,一起来…

一分钟了解自动化测试

目前自动化测试并不属于新鲜的事物,或者说自动化测试的各种方法论已经层出不穷,但是,能够明白自动化测试并很好落地实施的团队还不是非常多,我们接来下用通俗的方式来介绍自动化测试…… 首先我们从招聘岗位需求说起。看近期的职…

基于Java+SpringBoot制作一个社区宠物登记小程序

制作一个社区宠物登记小程序,帮助社区居民登记和管理他们的宠物信息,以便更好地跟踪和维护社区中的宠物状况,通过社区宠物信息登记系统,社区居民可以更好地管理自己的宠物信息,并与其他宠物所有者共享资源和信息。这将有助于提高社区宠物的福利和安全,促进社区成员之间的…

班级事务管理系统设计与实现

班级事务管理系统 后端采用Spring Boot开发。 cloud分支版本正在开发中,后端采用Spring Cloud进行改造。 系统架构 项目采用B/S架构,前后端通讯采用RESTful API,数据格式使用Json,认证Token格式采用JWT。 身份认证使用Spring …

jmeter性能测试常见的一些问题

一、request 请求超时设置 timeout 超时时间是可以手动设置的,新建一个 http 请求,在“高级”设置中找到“超时”设置,设置连接、响应时间为2000ms。 1. 请求连接超时,连不上服务器。 现象: Jmeter表现形式为&#xff…

安防监控视频汇聚EasyCVR平台的FLV视频流在VLC中无法播放的原因排查

众所周知,TSINGSEE青犀视频汇聚平台EasyCVR可支持多协议方式接入,包括主流标准协议国标GB28181、RTSP/Onvif、RTMP等,以及厂家私有协议与SDK接入,包括海康Ehome、海大宇等设备的SDK等。在视频流的处理与分发上,视频监控…

Mac 安装不在 Apple 商店授权的应用程序

文章目录 一、场景介绍二、实操说明 一、场景介绍 在日常的工作生活中,发现一些好用的应用程序,但是出于某些原因,应用程序的开发者并没有将安装包上架到苹果商店。 那么这些优秀的应用程序下载安装以后就会出现如下弹框被拒之门外 二、实操…

【论文阅读】基于深度学习的时序预测——Informer

系列文章链接 论文一:2020 Informer:长序列数据预测 论文二:2021 Autoformer:长序列数据预测 文章地址:https://arxiv.org/abs/2012.07436 github地址:https://github.com/zhouhaoyi/Informer2020 参考解读…

比特鹏哥5-数组【自用笔记】

比特鹏哥5-数组【自用笔记】 1.数组的概念2.一维数组的创建和初始化创建的语句结构初始化的语句结构 3.一维数组的使用数组的下标:从0开始,n个数组,最后一个的下标是n-1 4.一维数组在内存中的存储5.sizeof计算数组元素个数可以计算元素个数并…

计算机工作原理:进程调度

在计算机中,什么是进程?一个跑起来的程序就是一个进程,没跑起来就只能算一个程序。 在windows的任务管理器中,可以很清楚的看到有哪一些进程。 进程(progress)也叫任务(task)。 每…

侯捷 C++面向对象编程笔记——10 继承与虚函数

10 继承与虚函数 10.1 Inheritance 继承 语法::public base_class_name public 只是一种继承的方式,还有protect,private 子类会拥有自己的以及父类的数据 10.1.1 继承下的构造和析构 与复合下的构造和析构相似 构造是由内而外 Container …

UML-活动图

目录 一.活动图概述: 1.活动图的作用: 2.以下场合不使用活动图: 3.活动图的基本要素: 4.活动图的图符 4.1起始状态 4.2终止状态 4.3状态迁移 4.4决策点 4.5同步条:表示活动之间的不同 5.活动图: 二.泳道: 1.泳道图&a…