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

css 画图之质感盒子

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 画图之质感盒子 这篇文章的全部内容。

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

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

http://www.lryc.cn/news/22157.html

相关文章:

  • 面了一个月,终于让我总结出了这份最详细的接口测试面试题
  • {新}【java开发环境安装】完整工作环境安装配置
  • Python|每日一练|数组|数学|图算法|字符串|动态规划|单选记录:加一|迷宫问题|扰乱字符串
  • MySQL 使用IF判断
  • C++类与对象(上)【详析】
  • AIR系列|板载LED|gpio引脚选择|GPIO|流水灯|LuatOS-SOC接口|官方demo|学习(20-1):GPIO库基础
  • MySQL数据库中的函数怎样使用?
  • 命名空间的使用大全
  • Redisson分布式锁和同步器详解-官方原版
  • 【C语言进阶】指针与数组、转移表详解
  • SDN是什么,和SD-WAN有什么关系
  • 百度前端高频react面试题(持续更新中)
  • 中级嵌入式系统设计师2016下半年下午应用设计试题
  • 【雅思备考】九分学长写作课笔记
  • 【源码解析】SpringBoot自动装配的实现原理
  • 详解ROS时间戳
  • Android Window、WindowManager
  • 【一天一门编程语言】怎样设计一门编程语言?
  • 微服务保护 -- 初识 Sentinel(雪崩问题,快速入门Sentinel)
  • 软件测试面试问答
  • 【架构】架构师的核心能力-抽象能力
  • 前端一面常见react面试题(持续更新中)
  • 亥姆霍兹线圈测量系统
  • JavaScript 类型转换
  • Spring Batch 综合案例实战-项目准备
  • STM32CubeMX串口USART中断发送接收数据
  • JavaScript Web Workers使用流程
  • 数据结构与算法(五):优先队列
  • 二叉树的前序遍历-java两种方式-力扣144
  • 浅析 Redis 主从同步与故障转移原理