你不知道的阴影

我们在开发的时候,使用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,一经查实,立即删除!

相关文章

Java基础练习七(二维数组)

1. 翻转数组 设存在以下数组,请正常方法输出: char[][] chunxiao {{ 春 , 眠 , 不 , 觉 , 晓 } ,{ 处 , 处 , 闻 , 啼 , 鸟 } ,{ 夜 , 来 , 风 , 雨 , 声 } ,{ 花 , 落 , 知 , 多 , 少 } };public class Work0901 {public static void main(String[] args) {char[]…

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是偶数次,找到那…

【LeetCode】1281.整数的各位积和之差

题目 给你一个整数 n,请你帮忙计算并返回该整数「各位数字之积」与「各位数字之和」的差。 示例 1: 输入:n 234 输出:15 解释: 各位数之积 2 * 3 * 4 24 各位数之和 2 3 4 9 结果 24 - 9 15示例 2&…

如何理解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 …

【Essential C++课后练习】纯代码(更新中)

文章目录 第一章 C编程基础1.41.51.61.71.8 第二章 面向过程的编程风格2.12.22.32.42.52.6 第一章 C编程基础 1.4 /*********************************************************************说明:试着扩充这个程序的内容:(1)要求用户同时输…

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

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

Centos Linux带进度条复制(同步)文件和文件夹

centos linux 内建文件复制/备份命令 rsync 目的:我想从一个磁盘复制一堆文件到另一个磁盘,不希望改变文件的属性(尤其是所有者、还有创建时间、修改时间),最好还得能给我显示进度条。文件太多了,好几百GB…

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

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

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

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