css实现元素四周阴影

前言

首先确定的是需要使用box-shadow这一属性

语法如下:

box-shadow: h-shadow v-shadow blur spread color inset;

  • h-shadow:表示水平方向上的阴影偏移量,必须指明,可以是正数、负数、0,如果为正数左方有阴影,如果为负数右方有阴影,如果为0它位于元素的正中间。
  • v-shadow:表示垂直方向上的阴影偏移量,必须指明,可以是正数、负数、0,如果是正数则下方有阴影,如果是负数则上方有阴影,如果是0,则在元素正中间。
  • blur:表示阴影的模糊程度,可选项,可以是正数、负数。数值越大,阴影越模糊,反之阴影越清晰,如果值为0时表示完全清晰。
  • spread:表示阴影的扩张程度,可选项,可以是正数、负数。当扩张程度为正数时阴影扩张,而为负数时阴影收缩,如果值为0,则表示不改变阴影的扩张程度。
  • color:表示阴影的颜色,可以采用各种CSS支持的颜色格式进行设置,例如:RGB值,16进制值等等。
  • inset:表示是否要将阴影设置为内阴影,可以省略,如果指定了这个值则表示要将阴影设置为内阴影,否则为外阴影。

实现四周阴影

方法一:

需要分别设置四周阴影,代码如下:

div {width: 300px;height: 300px;box-shadow:5px 5px 5px #00000014,5px -5px 5px #00000014,-5px 5px 5px #00000014,-5px -5px 5px #00000014;
}

效果

在这里插入图片描述

方法二:

四周效果一致,只需控制第三个参数,注意前两个参数不能全为0

div {width: 300px;height: 300px;box-shadow: 0 2px 12px 0 pink;
}

效果

在这里插入图片描述

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

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

相关文章

Spring全家桶源码解析--2.3 Spring bean 的依赖注入--@Autowired@Value

文章目录 前言一、Autowired&Value:1.1 Autowired:1.2 Value: 二、依赖注入:2.1 注入点获取:2.2 通过 populateBean 入口依赖注入2.2.1 populateBean :主要通过 postProcessProperties 方法进行依赖注入…

医院安全(不良)事件管理系统源码 不良事件报告全套源码

不良事件管理系统是一种专为企业或组织设计的软件工具,用于跟踪、记录和管理不良事件。该系统可以有效地整合不良事件的收集、分类、分析和报告,帮助企业及时识别和处理不良事件,从而降低风险和损失。通过实时监控和自动化报告,该…

论文精读 MediaPipe Hands

MediaPipe Hands:On-device Real-time Hand Tracking MediaPipe手势:设备上的实时手势跟踪 论文地址:2006.10214.pdf (arxiv.org) 源码地址:GitHub - vidursatija/BlazePalm: PyTorch 目录 摘要 介绍 架构 BlazePalm Detector Hand L…

蓝桥杯算法心得——拼数(排列型回溯dfs)

大家好,我是晴天学长,排列型的dfs,在一些需要暴搜的题中很中很重要,需要的小伙伴可以关注支持一下哦!后续会继续更新的。💪💪💪 1) .拼数 2) .算法思路 超级递归 1.遍历数组&#…

玩了个锤子游戏小程序搭建流程:探索深度与逻辑的结合

随着移动互联网的普及,小程序已经成为了越来越多用户的选择。在这个背景下,玩了个锤子游戏小程序应运而生,它为用户提供了一个全新的游戏体验。那么,如何搭建这样一个小程序呢?本文将为大家详细介绍玩了个锤子游戏小程…

GoLong的学习之路(二十三)进阶,语法之并发(go最重要的特点)(锁,sync包,原子操作)

这章是我并发系列中最后的一章。这章主要讲的是锁。但是也会讲上一章channl遗留下的一些没有讲到的内容。select关键字的用法,以及错误的一些channl用法。废话不多说。。。 文章目录 select多路复用通道错误示例并发安全和锁问题描述互斥锁读写互斥锁 syncsync.Wait…

go学习之接口知识

文章目录 接口1.接口案例代码展示2.基本介绍3.基本语法4.应用场景介绍5.注意事项和细节6.接口编程经典案例7.接口与继承之间的比较8.面向对象编程--多态1)基本介绍2)快速入门3)接口体现多态的两种形式 9.类型断言1)先看一个需求2&…

单独设置echarts图例样式

参考:echarts-legend legend: [{data: [{name: 正常,icon: rect}],itemWidth: 16,itemHeight: 4,top: 6%,left: 35%,textStyle: {color: #626C78,fontSize: 14}},{data: [{name: 异常,icon: rect}],itemWidth: 16,itemHeight: 4,top: 6%,left: 50%,textStyle: {col…

2013年01月16日 Go生态洞察:并发不是并行

🌷🍁 博主猫头虎(🐅🐾)带您 Go to New World✨🍁 🦄 博客首页——🐅🐾猫头虎的博客🎐 🐳 《面试题大全专栏》 🦕 文章图文…

京东数据运营与分析:如何全面获取电商销售数据?

随着电商行业的快速发展,数据分析成为了电商运营中一个非常重要的环节,这一环往往能够帮助品牌方来提升销售业绩和管理效率。然而,如何获取到电商平台中详细、全面的销售数据是很多电商品牌方所关心的问题,事实上,第三…

GitHub加速配置

1. 找到要加速的域名 GitHub:github.com(这只是加载主页面的)GitHub下载:codeload.github.com(不唯一,自己去下载链接看) 2. 用域名到DNS解析服务器地址 ITDOG 3. 修改 Hosts 文件 依据解…

ai批量剪辑矩阵无人直播一站式托管系统源头技术开发

一、剪辑技术开发 智能剪辑:咱们研发公司自主研发的,包括算法,算法是阶乘算法,无限产出,六大剪辑模式已经满足当下需求了,当然剪辑出的视频可以一键发布,也可以内部批量发布,都可以的…

100G 最小封装光模块——SFP112光模块

10月易天团队远赴英国格拉斯哥参加展会,在ECOC展会上认识和学习了许多新的产品和技术,其中一款备受关注的是100G SFP112光模块,据说它是全球最小封装的模块。下面就跟着小易一起来了解一下这位新晋级的“大咖”吧! 100G SFP112采…

基于SpringBoot的SSMP整合案例(实体类开发与数据层开发)

实体类开发 导入依赖 Lombok&#xff0c;一个Java类库&#xff0c;提供了一组注解&#xff0c;简化POJO实体类开发<dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId> </dependency>lombok版本由SpringB…

k8s笔记资源限制,亲和和性 污点和容忍

镜像下载失败 当宿主机资源不足时&#xff0c;会把pod kill &#xff0c;在其他node 重建 在宿主机放可能多的资源 requests(请求) limits(限制) 超出百分比 容器 pod namespace级别 pod使用资源过多&#xff0c;导致宿主机资源不足&#xff0c;会导致重建pod cpu 内存限…

Riskified: 2023年电商政策滥用问题恶化,正严重挑战商家盈利底线

2023年11月14日&#xff0c;中国上海 —— 近日&#xff0c;由全球领先的电子商务欺诈和风险智能解决方案提供商 Riskified 发布的《政策滥用及其对商家的影响&#xff1a;2023年全球参考基准》报告显示&#xff0c;政策滥用问题正进一步恶化&#xff0c;超过九成电商商家正在承…

只有开源才能拯救AI

导语 | 随着 AI 技术的蓬勃发展&#xff0c;大模型的开源化正成为人工智能领域的新潮流&#xff0c;但同时引发的伦理和安全风险也饱受大家关注&#xff0c;如何把握平衡其中的尺度成为开源的一大难题。我们又应该如何有效进行开源治理&#xff1f;未来将走向何方&#xff1f;今…

前端工具nvm实现node自由

node的自由之路 前言 大家使用vue框架开发的朋友可能会遇到首次运行公司项目环境的时候&#xff0c;会出现使用npm install命令安装依赖包的时候出现各种各样的问题&#xff0c;其中很重要的一个错误原因就是因为你的nodejs版本和当时搭建环境的版本不一致造成的。今天就来给…

绿盟远程安全评估系统 RSAS 使用体验-难用

最近领导让我用公司采购的RSAS对产品进行漏洞扫描&#xff0c;学习并使用了这个软件&#xff0c;体验就是真的很难用。使用遇到问题时&#xff0c;咨询售后服务&#xff0c;机器人需要有公司认证&#xff0c;不能随便问问题&#xff0c;也是无语了。咨询客服&#xff0c;客服回…

猪酒店房价采集

<?php // 设置代理 $proxy_host jshk.com.cn;// 创建一个cURL资源 $ch curl_init();// 设置代理 curl_setopt($ch, CURLOPT_PROXY, $proxy_host.:.$proxy_port);// 连接URL curl_setopt($ch, CURLOPT_URL, "http://www.zujia.com/");// 发送请求并获取HTML文档…