css 设置div阴影样式

文章目录

  • 问题描述
  • 解决方案
    • 代码示例
    • 设置阴影样式

问题描述

大家好!我是夏小花,今天是2024年4月23日|农历三月十五,今天这篇文章主要以div或者是view添加阴影样式为主题 ,详细代码如下

解决方案

这段是vue页面中的 代码,现在我要将

<view style="display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; margin: -20rpx auto;">

给这个view添加阴影样式,具体实现思路如下:

代码示例

<template><view><view class="search_view"><uni-search-bar placeholder="输入关键词进行查询" v-model="inputValue" bgColor="#f3f3f3" @confirm="search" @input="input" class="search_bar"/><view><view style="margin: 0 auto;margin-top: 40rpx; width: 100%;"><view style="display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; margin: -20rpx auto;"><!-- 使用v-for来遍历aiqingList数组 --><view v-for="(aiqing, tuijindex) in aiqingList"style="width: 30.5%; margin: 10rpx; box-sizing: border-box; display: flex; flex-direction: column;"@click="jumpPage(aiqing.id)"><imagestyle="height: 330rpx; width: 100%; border-radius: 10rpx;":src="aiqing.filmImg"></image><view class="view-style">{{aiqing.filmGoLive == 0 ? '热播' : aiqing.filmGoLive == 1 ? '预播' : '云首播'}}</view><view style="text-align: center; margin-top: 10rpx; font-weight: bold; letter-spacing: 2rpx; font-size: 32rpx;">{{aiqing.filmName}}</view></view></view></view></view></view></view>
</template>

设置阴影样式

在需要设置view的代码块中添加css样式
/* 添加阴影样式 */

 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

/* 如果需要让阴影在某些背景上更明显,可以添加过渡效果 */

transition: 0.3s box-shadow;

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

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

相关文章

基于SpringBoot的宠物领养网站管理系统

基于SpringBootVue的宠物领养网站管理系统的设计与实现~ 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBootMyBatis工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 主页 宠物领养 宠物救助站 宠物论坛 登录界面 管理员界面 摘要 基于Spr…

1.C++入门

目录 1.C关键字 2.命名空间 作用域方面的优化 a.命名空间定义 b.命名空间使用 3.C 输入&输出 1.C关键字 C有63个关键字&#xff0c;C语言有32个关键字&#xff0c;存在重叠如荧光笔标出 2.命名空间 作用域方面的优化 如果变量&#xff0c;函数和类的名称都存在于全…

AI自动生成PPT文档 aippt的API介绍文档

官方链接直达&#xff01; 产品介绍​ 能力介绍​ AiPPT 是一款智能生成演示幻灯片的在线工具。专业设计团队打造海量模板资源&#xff0c;输入标题即可轻松生成完整的PPT。同时 AiPPT 支持导入多格式文档一键生成 PPT&#xff0c;让 PPT 创作更加高效。聚焦于内容&#xff0…

安装zabbix server

目录 1、实验环境 2、yum 安装zabbix server 2.1 解决权限问题和放行流量 2.2 安装zabbix-server 1、实验环境 操作系统rhel8zabbix6.0TLS数据库mysql8.0.30IP地址192.168.81.131时间配置NTP时间服务器同步 2、yum 安装zabbix server 如果通过yum源安装&#xff0c;操作系…

SysetmUI开机是否显示Keyguard的流程

KeyguardViewMediator的onSystemReady方法 没有启用keyguard时KeyguardViewMediator的log&#xff1a; onSystemReady 方法 doKeyguardLocked LockPatternUtils.isLockScreenDisabled 来判断是否启用 public final static String DISABLE_LOCKSCREEN_KEY "lockscreen.…

信息化工作人员必备常识4——ping命令详解【不间断发包自定义发包的大小自定义发包次数】

信息化工作人员必备常识4——ping命令详解【不间断发包&自定义发包的大小&自定义发包次数】 前言回顾pingtelnetnslookup命令 ping 命令详解帮助手册不间断向目标 IP 发送数据包 -t定义发送数据包的大小 -l-t&-l 验证网络承载能力自定义发送数据包的次数统计响应时…

[BT]BUUCTF刷题第20天(4.22)

第20天 Web [GWCTF 2019]我有一个数据库 打开网站发现乱码信息&#xff08;查看其他题解发现显示的是&#xff1a;我有一个数据库&#xff0c;但里面什么也没有~ 不信你找&#xff09; 但也不是明显信息&#xff0c;通过dirsearch扫描得到robots.txt&#xff0c;然后在里面得…

51单片机数字温度报警器_DS18B20可调上下限(仿真+程序+原理图)

数字温度报警器 1 **主要功能&#xff1a;*****\*资料下载链接&#xff08;可点击&#xff09;&#xff1a;\**** 2 **仿真图&#xff1a;**3 **原理图&#xff1a;**4 **设计报告&#xff1a;**5 **程序设计&#xff1a;**主函数外部中断函数DS18B20驱动 6 讲解视频7 **资料清…

上海亚商投顾:沪指震荡调整 油气等周期股集体下挫

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 一.市场情绪 沪指昨日震荡调整&#xff0c;深成指、创业板指小幅走弱。军工板块逆势拉升&#xff0c;中船应急、捷安高科、…

simlab python二次开发2-一键生成轴瓦并设定节点号

simlab python二次开发2-一键生成轴瓦并设定节点号 1、节点坐标计算并建立1.1、建坐标原点节点&#xff0c;并得到Model-1.gda1.2、轴瓦节点计算并建立 2、由节点建面2.1、由4个节点建面得到3个面单元Body2.2、得到Bodies名称2.3、根据Bodies名称选面特征&#xff08;放入Group…

AR爆发的前夜,Rokid站在了门口

文&#xff5c;刘俊宏 摆脱6寸的手机屏幕&#xff0c;栖居在300寸大屏的智慧生活是什么样子&#xff1f; 4月20日&#xff0c;Rokid在新品AR Lite空间计算套装的发布会上&#xff0c;“硬刚”了苹果的Vision Pro。 Rokid AR Lite空间计算套装 Rokid AR Lite与苹果Vision Pro…

el-upload组件如何上传blob格式的url地址视频

el-upload组件如何上传blob格式的url地址视频 一、存在问题二、直接上代码 需求&#xff1a;想把视频地址url:“blob:http://localhost:8083/65bd3c0f-52ec-4844-b85e-06fdb5095b7b”&#xff0c;通过el-upload组件上传 el-upload是Element UI中用于文件上传的组件&#xff0c;…

中文医疗大模型及中文底座大模型参考

参考&#xff1a;https://github.com/HqWu-HITCS/Awesome-Chinese-LLM 中文底座大模型 中文医疗大模型

c#学习入门1

一、环境配置 颜色主题 字体设置 行号设置 二、第一个应用程序 1. 在解决方案下创建一个新项目 第一种注释&#xff1a;两杠注释 第二种注释&#xff1a;星号注释 第三种注释&#xff1a;三杠注释(只有在花括号后面输出才会自动补全&#xff09; 2.控制台输入打印基础语句 输…

第⑯讲:Ceph集群Pool资源池管理以及PG的数据分布的核心技术要点

文章目录 1.Pool资源池的管理1.1.查看Pool资源池列表1.2.创建一个Pool资源池1.3.查看Pool资源池的参数信息1.4.修改Pool资源池的参数信息1.5.为Pool资源池设置应用模式1.6.重命名Pool资源池1.7.设置Pool资源池的限额1.8.删除Pool资源池1.9.查看Pool资源池的利用率 2.PG的数据分…

产品经理必会12个产品模型

很多运营经理&#xff0c;常常觉得产品成功的决定性因素是“产品做得好”。 而很多产品经理却认为&#xff0c;产品互抄太严重了&#xff0c;差异化的竞争要点是“产品运营得好”。 在商业高速发展时代&#xff0c;成功产品定义往往不是单点成功&#xff0c;而是由3大要素共同…

就业班 第三阶段(负载均衡) 2401--4.18 day2 nginx2 LVS-DR模式

3、LVS/DR 模式 实验说明&#xff1a; 1.网络使用NAT模式 2.DR模式要求Director DIP 和 所有RealServer RIP必须在同一个网段及广播域 3.所有节点网关均指定真实网关 主机名ip系统用途client172.16.147.1mac客户端lvs-server172.16.147.154centos7.5分发器real-server1172.16.…

SpringBoot整合PDF动态填充数据并下载

目录 目录 一、准备环境 二、iTextPDF介绍 三、步骤 四、访问查看结果 五、源代码参考 一、准备环境 ①下载一个万兴pdf软件 ②准备一个pdf 文件 二、iTextPDF介绍 这是一个用于生成PDF文档的Java库&#xff0c; 文档创建与修改&#xff1a;iTextPDF能够从零开始创建…

学习Rust的第11天:模块系统

Rust的模块系统可以使用它来管理不断增长的项目&#xff0c;并跟踪 modules 存储在何处。 Rust的模块系统是将代码组织成逻辑片段的有效工具&#xff0c;因此可以实现代码维护和重用。模块支持分层组织、隐私管理和代码封装。Rust为开发人员提供了多功能和可扩展的方法来管理项…

用 Pytorch 训练一个 Transformer模型

昨天说了一下Transformer架构&#xff0c;今天我们来看看怎么 Pytorch 训练一个Transormer模型&#xff0c;真实训练一个模型是个庞大工程&#xff0c;准备数据、准备硬件等等&#xff0c;我只是做一个简单的实现。因为只是做实验&#xff0c;本地用 CPU 也可以运行。 本文包含…