当前位置: 首页 > news >正文

css专题1-----给div盒子的边框添加阴影

        原div盒子的css代码为:

padding: 0 20upx;
border: 1px solid #F0F0F0;
box-sizing: border-box;
border-radius: 5upx;

        要为边框(border)添加阴影,您可以使用 box-shadow 属性。根据您给出的样式,您可以在现有的 CSS 代码中添加这一属性。以下是修改后您的代码以包含阴影效果:

margin: 18upx 28upx;
padding: 0 20upx;
border: 1px solid #F0F0F0;
box-sizing: border-box;
border-radius: 5upx;
box-shadow: 0 2upx 5upx rgba(0, 0, 0, 0.1); /* 增加阴影效果 */

参数解释:

  • 0:阴影在水平方向上的偏移量(在这里为0,意味着阴影不会向左或右偏移)。
  • 2upx:阴影在垂直方向上的偏移量(在这里为2upx,意味着阴影向下偏移2upx)。
  • 5upx:阴影的模糊半径(模糊效果,数值越大则阴影越模糊)。
  • rgba(0, 0, 0, 0.1):阴影的颜色和透明度(这里是黑色,透明度为10%)。

您可以根据需要调整这些值来获得您想要的效果。

http://www.dtcms.com/a/119822.html

相关文章:

  • 地质科研智能革命:当大语言模型“扎根”地质现场、大语言模型本地化部署与AI智能体协同创新实践
  • 项目管理中客户拒绝签字验收?如何处理和预防
  • ModelScope能干什么?
  • Java Comparable 接口详解
  • 在Windows搭建gRPC C++开发环境
  • 局域网访问 Redis 方法
  • springmvc:tomcat启动无报错但接口404问题排查
  • 国标GB28181视频平台EasyCVR顺应智慧农业自动化趋势,打造大棚实时视频监控防线
  • 2025上海CMEF:鱼跃以“AI+医疗”开启健康管理新纪元
  • java基础 流(Stream)
  • 按键++,--在操作uint8_t类型(一个取值为1~10的数)中,在LCD中显示两位数字问题
  • Vue知识点(5)-- 动画
  • 大脑功能与结构的解耦揭示了人类大脑的区域行为专门化
  • 实习技能记录【2】-----LVGL[基本概念]
  • opencv无法设置禁用RGB转换问题
  • centos练习docker<基础>
  • 蓝桥杯第十一届省赛C++B组真题解析
  • 特权FPGA之UART串口
  • ⭐算法OJ⭐数据流的中位数【最小堆】Find Median from Data Stream
  • leetcode0287. 寻找重复数-medium
  • 各种排序思路及实现
  • CentOS8.5 安装 LLaMA-Factory
  • 什么是强缓存和协商缓存?它们的工作原理是什么?
  • 软件工程面试题(三十七)
  • 2025年3月GESP C++四级等级考试真题——二阶矩阵
  • VBA将Word文档内容逐行写入Excel
  • WGAN-GP 原理及实现(pytorch版)
  • MySQL 备份与恢复:数据库的灾难保险计划
  • 兔单B细胞单抗制备服务
  • 蓝桥杯嵌入式十五届模拟二(串口DMA,占空比的另一种测量方式)