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

css 画图之质感盒子

news 文章来源：https://blog.csdn.net/qq_44500360/article/details/129230895 2024/11/18 20:43:09

20230226184250.png

前言

css 众所周知可以做很多的事情，比如：界面效果、特效、独特的样式等。今天给各位朋友带来的是以box-shadow来画一个很有质感效果的一个盒子。

之前在网上冲浪的时候，发现了这样的一个效果，所以来记录一下。

下面是实现后的效果图。

20230226184250.png

看着还是不错吧，各位铁子。让我一起往文章下面看看他的实现过程吧。

box-shadow 主角描述

什么是box-shadow？

属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色。

box-shadow 属性使用说明

box-shadow 接收 6 个属性值，当存在多个阴影时则每条阴影以,分割，如下：

box-shadow: 属性A 属性B 属性C 属性D 属性E 属性F,属性A 属性B 属性C 属性D 属性E 属性F;

属性值说明

  • A：值为：inset，表示阴影的扩散状态，不填则 向外扩散，常称 外阴影；当存在值并且为inset时，则向内扩散， 常称 内阴影。
  • B：X 轴偏移量， 可为 负数。
  • C：Y 轴偏移量， 可为 负数。
  • D：模糊半径， 可为 负数。
  • E：扩散半径， 可为 负数。
  • F：阴影颜色。

实现过程

全程实现方案以 box-shadow 实现。

搭建基础布局

<div class="content"><div class="box"></div>
</div>

 * {margin: 0;padding: 0;
}
.content {display: flex;align-items: center;justify-content: center;width: 100%;height: 100vh;background-color: rgba(171, 189, 207, 1);
}
.box {width: 300px;height: 300px;background-color: rgba(201, 212, 223, 1);border-radius: 35px;
}

效果图：
image.png

添加阴影

这里我们先添加一条 外阴影

其 x、y 轴坐标为 15 个像素，然后我们设置它的 模糊半径 为 30 个像素，扩散半径 为 -10 个像素。

大概成效位置图：

image.png

.box {width: 300px;height: 300px;background-color: rgba(201, 212, 223, 1);border-radius: 35px;box-shadow: 15px 15px 30px -10px rgba(0, 0, 0, 0.2);
}

效果图：

image.png

扩散半径 为负数时 说明：

当 扩散半径 为负数的时候，它会根据设定的 值 往回收一定的范围。

添加一条 白色 内阴影，像 一束光一样照在我们的盒子上

其 x、y 轴坐标为 20 个像素，然后我们设置它的 模糊半径 为 15 个像素。

大概成效位置图：

image.png

.box {width: 300px;height: 300px;background-color: rgba(201, 212, 223, 1);border-radius: 35px;box-shadow: 15px 15px 30px -10px rgba(0, 0, 0, 0.2),inset 20px 20px 15px rgba(255, 255, 255, 0.7);
}

效果图：

image.png

添加一条 白色 外阴影，来 散射 我们的 光

其 x、y 轴坐标为 -15 个像素，然后我们设置它的 模糊半径 为 35 个像素。

大概成效位置图：

image.png

.box {width: 300px;height: 300px;background-color: rgba(201, 212, 223, 1);border-radius: 35px;box-shadow: 15px 15px 30px -10px rgba(0, 0, 0, 0.2),inset 20px 20px 15px rgba(255, 255, 255, 0.7),-15px -15px 35px rgba(255, 255, 255, 0.7);
}

效果图：

image.png

添加一条 黑色 内阴影，来 凸显我们的盒子 的边界感

这里我们需要将这条阴影画在 右下角。

其 x、y 轴坐标为 -1 个像素，然后我们设置它的 模糊半径 为 10个像素。

大概成效位置图：

image.png

.box {width: 300px;height: 300px;background-color: rgba(201, 212, 223, 1);border-radius: 35px;box-shadow: 15px 15px 30px -10px rgba(0, 0, 0, 0.2),inset 20px 20px 15px rgba(255, 255, 255, 0.7),-15px -15px 35px rgba(255, 255, 255, 0.7),inset -1px 1px 10px rgba(0, 0, 0, 0.5);
}

效果图：

image.png

全部代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.content {display: flex;align-items: center;justify-content: center;width: 100%;height: 100vh;background-color: rgba(171, 189, 207, 1);}.box {width: 300px;height: 300px;background-color: rgba(201, 212, 223, 1);border-radius: 35px;box-shadow: 15px 15px 30px -10px rgba(0, 0, 0, 0.2),inset 20px 20px 15px rgba(255, 255, 255, 0.7),-15px -15px 35px rgba(255, 255, 255, 0.7),inset -1px 1px 10px rgba(0, 0, 0, 0.5);}</style>
</head>
<body><div class="content"><div class="box"></div></div></body>
</html>

结语

以上就是 css 画图之质感盒子 这篇文章的全部内容。

若朋友你有更好的建议或者想法，可以评论在下方，一起探讨哦。

我是 桃小瑞，公众号 @ 桃小瑞。

相关文章：

css 画图之质感盒子

前言 css 众所周知可以做很多的事情&#xff0c;比如&#xff1a;界面效果、特效、独特的样式等。今天给各位朋友带来的是以box-shadow来画一个很有质感效果的一个盒子。 之前在网上冲浪的时候&#xff0c;发现了这样的一个效果&#xff0c;所以来记录一下。 下面是实现后的…...

编程日记 2023/2/27 18:10:38

面了一个月，终于让我总结出了这份最详细的接口测试面试题

目录 1、你们公司是如何做接口测试的&#xff1f; 2、什么时候开展接⼝测试&#xff1f; 3、接⼝测试和UI测试的工作是否重复&#xff1f; 4、接口测试框架怎么搭建&#xff1f; 5、接⼝之间有依赖时怎么处理&#xff1f; 6、如何判断接⼝测试的结果&#xff08;成功或失败&a…...

编程日记 2023/2/27 18:09:31

{新}【java开发环境安装】完整工作环境安装配置

公司新发了一台红米笔记本&#xff0c;打算用新的笔记本&#xff0c;开启自己新的工作旅程&#xff0c;其中把做个的事都记录一边&#xff0c;以便实现&#xff0c;听、读、视频图像、讨论、实践、教人的一个学习过程。 一、Java开发环境安装 找到安装包下载&#xff1b;在官…...

编程日记 2023/2/27 18:08:25

Python|每日一练|数组|数学|图算法|字符串|动态规划|单选记录：加一|迷宫问题|扰乱字符串

1、加一&#xff08;数组&#xff0c;数学&#xff09; 给定一个由 整数 组成的 非空 数组所表示的非负整数&#xff0c;在该数的基础上加一。 最高位数字存放在数组的首位&#xff0c; 数组中每个元素只存储单个数字。 你可以假设除了整数 0 之外&#xff0c;这个整数不会以…...

编程日记 2023/2/27 18:07:19

MySQL 使用IF判断

mysql判断语句 1、IF 和IFNULL IF(表达式1&#xff0c;表达式2&#xff0c;表达式3); 含义&#xff1a;如果表达式1为true&#xff0c;则返回表达式2的值&#xff0c;否则返回表达式3的值&#xff0c;表达式的值类型可以为数字或字符串 例&#xff1a;判断对错 SELECT IF(TRUE…...

编程日记 2023/2/27 18:06:07

C++类与对象（上）【详析】

目录1.面向过程和面向对象初步认识2.类的引入3.类的定义4.类的访问限定符及封装4.1访问限定符4.2封装5.类的作用域6.类的实例化7.类对象模型7.1 如何计算类对象的大小8.this关键字如果说我们对C的初步认识&#xff0c;是觉得C是对C语言不足之处的进行修补&#xff0c;在认识完类…...

编程日记 2023/2/27 18:05:01

AIR系列|板载LED|gpio引脚选择|GPIO|流水灯|LuatOS-SOC接口|官方demo|学习（20-1）：GPIO库基础

AIR系列各型号开发板板载LED对应管脚及GPIO控制代码 AIR103&#xff1a; rtos_bsp "AIR103" then -- Air103开发板LED引脚编号--return pin.PB26, pin.PB25, pin.PB24return 42,41,40 AIR105&#xff1a; rtos_bsp "AIR105" then -- Air105开发板LED引…...

编程日记 2023/2/27 18:03:56

MySQL数据库中的函数怎样使用？

函数 是指一段可以直接被另一段程序调用的程序或代码。 也就意味着&#xff0c;这一段程序或代码在MySQL中已经给我们提供了&#xff0c;我们要做的就是在合适的业务场景调用对应的函数完成对应的业务需求即可。 那么&#xff0c;函数到底在哪儿使用呢?我们先来看两个场景&…...

编程日记 2023/2/27 18:02:48

命名空间的使用大全

概述 在C中&#xff0c;我们会使用变量、常量、函数、类、对象、结构体等各种元素。随着工程越来越庞大&#xff0c;代表这些元素的标识符冲突的概率也越来越大。为了解决标识符命名冲突的问题&#xff0c;C标准在1995年引入了关键字namespace&#xff0c;也叫做命名空间。使用…...

编程日记 2023/2/27 18:01:42

Redisson分布式锁和同步器详解-官方原版

一、锁定基于Redis的Java分布式可重入锁对象&#xff0c;并实现了锁接口。如果获取锁的Redisson实例崩溃&#xff0c;则此类锁可能会在获取状态下永久挂起。为了避免这种Redisson维护锁看门狗&#xff0c;当锁持有者Redisson实例处于活动状态时&#xff0c;它会延长锁的到期时间…...

编程日记 2023/2/27 17:59:29

【C语言进阶】指针与数组、转移表详解

前言 大家好我是程序猿爱打拳&#xff0c;我们在学习完指针的基本概念后知道了指针就是地址&#xff0c;我们可以通过这个地址并对它进行解引用从而改变一些数据。但只学习指针的基础是完全不够的&#xff0c;因此学习完指针的基础后我们可以学习关于指针的进阶&#xff0c;其中…...

编程日记 2023/2/27 17:58:23

SDN是什么，和SD-WAN有什么关系

SDN全称为“软件定义网络”&#xff08;Software-Defined Networking&#xff09;&#xff0c;是一种新型的网络架构&#xff0c;通过将网络的控制面和数据面分离&#xff0c;将网络控制集中到控制器中进行统一管理和配置&#xff0c;以提高网络的灵活性和可管理性。传统网络的…...

编程日记 2023/2/27 17:57:18

百度前端高频react面试题（持续更新中）

说说你用react有什么坑点&#xff1f; 1. JSX做表达式判断时候&#xff0c;需要强转为boolean类型 如果不使用 !!b 进行强转数据类型&#xff0c;会在页面里面输出 0。 render() {const b 0;return <div>{!!b && <div>这是一段文本</div>}</div…...

编程日记 2023/2/27 17:56:11

中级嵌入式系统设计师2016下半年下午应用设计试题

中级嵌入式系统设计师2016下半年下午试题 试题一 阅读以下说明，回答问题1至问题3。 【说明】 某综合化智能空气净化器设计以微处理器为核心，包含各种传感器和控制器，具有检测环境空气参数（包含温湿度、可燃气体、细颗粒物等），空气净化、加湿、除湿、加热和杀菌等功能…...

编程日记 2023/2/27 17:55:08

【雅思备考】九分学长写作课笔记

原视频&#xff1a;https://www.bilibili.com/video/BV1FG4y1J7br?p13&vd_source552ac2291179cf9d44088ea168db5531 一、综述 共计1小时 小作文&#xff1a; 描述 图表图&#xff08;数据图&#xff09;、流程图&#xff08;示意图&#xff09;、地图&#xff08;示意…...

编程日记 2023/2/27 17:54:02

【源码解析】SpringBoot自动装配的实现原理

什么是SpringBoot的自动装配 SpringBoot在启动的时候会扫描外部jar包中的META-INF/spring.factories文件&#xff0c;将文件中配置的类信息按照条件装配到Spring容器中。 实现原理 核心注解SpringBootApplication Target({ElementType.TYPE}) Retention(RetentionPolicy.R…...

编程日记 2023/2/27 17:52:55

详解ROS时间戳

ROS&#xff08;Robot Operating System&#xff09;是一个用于机器人开发的开源软件框架&#xff0c;其中涉及到了一些与时间相关的概念和工具&#xff0c;如时间戳、计时器等。本文将主要介绍ROS中时间戳的概念和应用&#xff0c;并提供一个Python代码案例演示如何处理ROS时间…...

编程日记 2023/2/27 17:51:48

Android Window、WindowManager

1.窗口Window 在Android中显示一个界面，首先想到的是Activity、Dialog或Toast。但是在有些情况下，比如悬浮球，用Activity会显然多余，这个时候可以直接使用窗口来实现。 Android中所有的视图都是通过Window来呈现的，不管是Activity、Dialog还是Toast，它们的视图实际上都…...

编程日记 2023/2/27 17:50:44

【一天一门编程语言】怎样设计一门编程语言？

怎样设计一门编程语言&#xff1f; 确定目标 确定语言的用途&#xff1a; 是一门通用编程语言&#xff0c;还是一门专门面向某个特定目标的语言&#xff1f;是一门面向对象的语言&#xff0c;还是一门过程化的语言&#xff1f;将语言的最终用户定义为谁&#xff1f; 确定语言…...

编程日记 2023/2/27 17:49:37

微服务保护 -- 初识 Sentinel（雪崩问题，快速入门Sentinel）

大家好&#xff0c;今天我们要来学习阿里巴巴开源的流量控制和熔断降级框架 – Sentinel 。 1、雪崩问题及解决方案 首选我们来了解一下雪崩问题及其解决方案&#xff0c;我们学习这个微服务保护&#xff0c;其实就是为了去应对类似于雪崩问题这样的服务故障。 1.1 什么是雪…...

编程日记 2023/2/27 17:48:33

软件测试面试问答

笔试 笔试的话我们需要揣测具体会考什么内容&#xff0c;我们可以通过招聘信息去了解该公司需要什么样的技能&#xff0c;以此来准备笔试。一般必考的内容会有编程&#xff0c;测试用例设计&#xff0c;工作流程&#xff0c;逻辑思维等内容&#xff0c;除此之外每个公司可能还会…...

编程日记 2023/2/27 17:47:26

【架构】架构师的核心能力-抽象能力

文章目录一、通过归纳法找共性二、通过演绎法找关系三、通过归纳法找特性四、最后架构的核心是管理复杂度&#xff0c;架构师的核心能力是抽象能力&#xff0c;什么是抽象能力&#xff1f;抽象能力就是一种化繁为简的能力。何为化繁为简&#xff1f;就是把一种复杂的事情变得简…...

编程日记 2023/2/27 17:46:18

前端一面常见react面试题（持续更新中）

React 组件中怎么做事件代理&#xff1f;它的原理是什么&#xff1f; React基于Virtual DOM实现了一个SyntheticEvent层&#xff08;合成事件层&#xff09;&#xff0c;定义的事件处理器会接收到一个合成事件对象的实例&#xff0c;它符合W3C标准&#xff0c;且与原生的浏览器…...

编程日记 2023/2/27 17:45:11

亥姆霍兹线圈测量系统

亥姆霍兹线圈[Helmholtz线圈]是指由具有相同线圈匝数、相同线圈绕制方式且线圈半径等于线圈间距的一对或者多对线圈构成的线圈组合。 根据线圈的形状&#xff0c;亥姆霍兹线圈可分为圆形亥姆霍兹线圈和方形亥姆霍兹线圈&#xff1b;根据磁场方向&#xff0c;亥姆霍兹线圈可分为…...

编程日记 2023/2/27 17:44:04

JavaScript 类型转换

Number() 转换为数字&#xff0c; String() 转换为字符串&#xff0c; Boolean() 转化为布尔值。JavaScript 数据类型在 JavaScript 中有 5 种不同的数据类型&#xff1a;stringnumberbooleanobjectfunction3 种对象类型&#xff1a;ObjectDateArray2 个不包含任何值的数据类型…...

编程日记 2023/2/27 17:42:57

Spring Batch 综合案例实战-项目准备

目录 案例需求 分析 项目准备 步骤1&#xff1a;新开spring-batch-example 步骤2&#xff1a;导入依赖 步骤3&#xff1a;配置文件 步骤4&#xff1a;建立employee表与employe_temp表 步骤5&#xff1a;建立基本代码体系-domain-mapper-service-controller-mapper.xml …...

编程日记 2023/2/27 17:41:51

STM32CubeMX串口USART中断发送接收数据

本文代码使用 HAL 库。 文章目录前言一、中断控制二、USART中断使用1. 中断优先级设置 &#xff1a;2. 使能中断3. 使能UART的发送、接收中断4. 中断收发函数5. 中断处理函数6. 中断收发回调函数三、串口中断实验串口中断发送数据点亮 led&#xff1a;实验现象&#xff1a;总结…...

编程日记 2023/2/27 17:40:44

JavaScript Web Workers使用流程

背景 Web Workers是一个API&#xff0c;允许在浏览器中运行后台处理任务&#xff0c;而不影响用户界面&#xff08;UI&#xff09;线程的稳定性。 Web Workers 可用于消除阻止 UI 的耗时任务&#xff0c;如图表生成&#xff0c;物理模拟或数据分析等&#xff1a; 使用 Web W…...

编程日记 2023/2/27 17:39:37

数据结构与算法（五）：优先队列

这节总结一下优先队列的常用实现方法。 一、基本概念 普通的队列是一种先进先出的数据结构&#xff0c;元素在队列尾追加&#xff0c;而从队列头删除。在优先队列中&#xff0c;元素被赋予优先级。当访问元素时&#xff0c;具有最高优先级的元素最先删除。优先队列具有最高级…...

编程日记 2023/2/27 17:38:31

二叉树的前序遍历-java两种方式-力扣144

一、题目描述给你二叉树的根节点 root &#xff0c;返回它节点值的 前序 遍历。示例 1&#xff1a;输入&#xff1a;root [1,null,2,3]输出&#xff1a;[1,2,3]示例 2&#xff1a;输入&#xff1a;root []输出&#xff1a;[]示例 3&#xff1a;输入&#xff1a;root [1]输出…...

编程日记 2023/2/27 17:37:27

网站建设扁平化/seo排名软件

立下一个Flag&#xff0c;未来只深耕两个领域&#xff1a; 供应链方向业财融合&#xff08;含金融&#xff09;方向...

编程日记 2024/11/18 16:14:41

上海做网站天锐/百度认证证书

前一段时间遇到的系统故障&#xff0c;以下是操作过程&#xff1a;大晚上收到该服务器内存超高告警&#xff0c;ps aux发现有大量的/usr/sbin/sendmail进程&#xff0c;一开始将其kill掉&#xff1a;ps -ax | grep sendmail | awk {print $1} | wc –l 统计了以下有1230个ps -a…...

编程日记 2024/11/18 14:35:54

南京网站建设多少钱/西安seo公司

本文仅代表 Phodal 的个人观点&#xff0c;来听听一个前端程序员的 YY。新一期的ThoughtWorks技术雷达有点出乎意料&#xff0c;使用new标签的框架、工具、技术、语言等等超过了一半——Vue.js、ES2017上榜&#xff0c;Three.js凭着VR的火又上榜了&#xff0c;还有熟悉的Electr…...

编程日记 2024/11/18 13:31:17

重要新闻头条/广东seo网络培训

JVM有哪些垃圾回收器&#xff1f;是怎么工作的&#xff1f;什么是STW&#xff1f;它都发生在哪些阶段&#xff1f;什么是三色标记&#xff1f;如何解决错标记和漏标记的问题&#xff1f;为什么要设计这么多的垃圾回收器? STW:Stop-The-Word。是在垃圾回收算法执行过程中&…...

编程日记 2024/11/18 8:33:43

怎么做网站呢/windows优化大师功能

题目&#xff1a;本题目为谭浩强版C语言教材第11章《结构体和共用体》的课后习题第2题。要求&#xff1a;定义一个结构体变量&#xff08;包括年、月、日&#xff09;&#xff0c;由主函数传递年月日到一个函数&#xff0c;计算出该日在本年度中是第几天。注意闰年与否。 解决方…...

编程日记 2024/11/18 7:24:26

网站做推广页需要什么软件下载/软文是什么文章

Spark缺点无论是 Spark Streaming还是 Structured Streaming,Spark流处理的实时性还不够,所以无法用在一些对实时性要求很高的流处理场景中。这是因为 Spark的流处理是基于所谓微批处理( Micro- batch processing)的思想,即它把流处理看作是批处理的一种特殊形式,每次接收到一个…...

编程日记 2024/11/18 6:37:48