首页 > 其他分享 >2023.6.14 - 设置底部阴影

2023.6.14 - 设置底部阴影

时间:2023-06-14 17:12:31浏览次数:44  
标签:容器 14 index 阴影 2023.6 10px position before

如果您想要一个 outset 的阴影,只在容器底部显示,您可以使用 ::before::after 伪元素来创建一个阴影层,然后将它放在容器下面。这种方法可以避免阴影出现在容器的顶部。

下面是一个实现这个效果的 CSS 代码示例:

div {
  position: relative;
  z-index: 1;
}

div::before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  z-index: -1;
}

这个示例中,我们首先将容器的 position 属性设置为 relative,并将 z-index 属性设置为 1,以确保容器位于阴影层的上方。然后,我们使用 ::before 伪元素创建一个阴影层,将其放置在容器的下方。最后,我们将阴影层的 z-index 属性设置为 -1,使其在容器下方。

请注意,这种方法需要调整容器和阴影层的定位,以使它们正确地重叠。您可能需要根据您的具体情况进行一些微调。

标签:容器,14,index,阴影,2023.6,10px,position,before
From: https://www.cnblogs.com/yehuda/p/17480797.html

相关文章

  • npm install报错[email protected] postinstall: `node scripts/build.js`
    [email protected]: nodescripts/build.js解决方法:npmconfigsetsass_binary_site=https://npm.taobao.org/mirrors/node-sassnpminstall  ......
  • 2023.6.14每日一题
    B.Garland-1800原题链接CodeforcesRound612(Div.1)ACodeforcesRound612(Div.2)C题目大意给定一个被删去字符的\(1\simn\)排列,现在需要将空缺位置填入缺失的数,使得最终得到的序列仍是一个\(1\simn\)的排列,问所有填法中,相邻两项的奇偶性不同的数对数量最小......
  • 2023-06-14 记录一下vue组件如何调用App.vue里面的方法(代码来至chatGpt)
    可以通过在子组件中使用$emit方法来触发App.vue中的方法。具体步骤如下:在App.vue中定义一个方法<script>exportdefault{methods:{appMethod(){console.log('调用了App.vue中的方法')}}}</script>在子组件中使用$emit方法触发该方......
  • 【题解】[JLOI2014]镜面通道
    题目描述:在一个二维平面上,有一个镜面通道,由镜面\(AC,BD\)组成,\(AC,BD\)长度相等,且都平行于\(x\)轴,\(B\)位于\((0,0)\)。通道中有\(n\)个外表面为镜面的光学元件,光学元件\(\alpha\)为圆形,光学元件\(\beta\)为矩形(这些元件可以与其他元件和通道有交集,具体看下图)。......
  • 系统架构设计师笔记第14期:系统分析与设计
    面向对象的方法面向对象方法(Object-orientedmethods)是一种软件开发方法,其核心思想是将软件系统建模为对象的集合,这些对象之间通过消息传递进行交互。面向对象方法强调对象的概念、封装、继承和多态等特性,以实现软件系统的可重用性、可维护性和灵活性。以下是面向对象方法的一些关......
  • W25Q32-2023-06-14
    1、W25Q内部结构图截取自《[9-3]53W25QXX介绍》视频13:44的地方,对比起来,页、扇区和块之间的关系相比“W25Q32共32M-bit(4MB字节),它可划分为64块,每块64KB,每块又可划分为16个扇区,每个扇区4KB,每个扇区又可划分16页,每页256B”这样的描述更为清晰,而手册里结构图的问题在于普遍都是采用......
  • 【230614-1】已知在三角形ABC中,有A+B=3C,且2Sin(A-C)=SinB 求:(1)SinA (2)AB=5,求AB上
    【题目】已知在三角形ABC中,有A+B=3C,且2Sin(A-C)=SinB 求:(1)SinA (2)AB=5,求AB上的高?(23年高考数学新一卷17题)......
  • 深度学习应用篇-元学习[14]:基于优化的元学习-MAML模型、LEO模型、Reptile模型
    深度学习应用篇-元学习[14]:基于优化的元学习-MAML模型、LEO模型、Reptile模型1.Model-AgnosticMeta-LearningModel-AgnosticMeta-Learning(MAML):与模型无关的元学习,可兼容于任何一种采用梯度下降算法的模型。MAML通过少量的数据寻找一个合适的初始值范围,从而改变梯度下降......
  • C/C++《程序设计课程设计》[2023-06-14]
    C/C++《程序设计课程设计》[2023-06-14]《程序设计课程设计》指导书程序设计课程设计说明书一、设计任务与要求《程序设计课程设计》是在完成《程序设计基础》课程学习后进行的一门专业实践课程,是培养学生综合运用所学知识解决专业相关问题的重要环节,是对学生实际工作能力的......
  • 6-14|gitlab的runner的流水线怎么看
    要查看GitLab的Runner的流水线,可以按照以下步骤操作:1.进入GitLab的项目页面,选择“CI/CD”选项卡。2.在“Pipelines”选项卡下,在顶部的搜索框中输入Runner名称或者RunnerID,筛选出该Runner对应的流水线。3.点击该流水线的ID,进入该流水线的详情页面。4.在流水线详情页面,可以......