css 中box-shadow使用总结

还记得我之前还是 ie 时代的时候我们如果遇到有投影,阴影的设计稿,一般的做法就是使用图片作为背景实现,如果要是做自适应宽高还需要利用好几个元素拼接起来设置图片背景实现,而现在我们想要实现投影只需要一个 css 属性 box-shadow 就能轻松搞定,下面我们来详细介绍一下它的使用方法:

一、概述

box-shadow 是 CSS 中的一个属性,用于在元素框的外部添加阴影效果。通过调整阴影的偏移量、模糊度、扩展距离和颜色,可以创建出各种独特的视觉效果。

二、语法

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

h-offset (水平偏移量): 定义阴影的水平偏移距离。正值向右偏移,负值向左偏移。
v-offset (垂直偏移量): 定义阴影的垂直偏移距离。正值向下偏移,负值向上偏移。
blur (模糊半径): 定义阴影边缘的模糊程度。数值越大,阴影越模糊。
spread (扩张半径): 定义阴影的大小。正值扩大阴影尺寸,负值缩小阴影尺寸。
color 定义阴影的颜色。
inset 可选参数,如果指定了该参数,阴影将在元素内部。

三、示例

1. 简单的外部阴影
div {box-shadow: 5px 5px 3px 0px rgba(0, 0, 0, 0.5);
}
2. 带有模糊和扩展的阴影
div {box-shadow: 10px 10px 10px 5px rgba(0, 0, 0, 0.3);
}
3. 内部阴影
div {box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}
4. 多个阴影
div {box-shadow: 3px 3px 5px 6px rgba(255, 0, 0, 0.5), -3px -3px 5px 6px rgba(0, 0, 255, 0.5);
}

四、注意事项

  • 阴影不会影响元素的布局或大小。
  • 阴影的渲染顺序与在 box-shadow 属性中定义的顺序相同。
  • 阴影可以与边框半径 (border-radius) 和其他边框样式一起使用。
  • 阴影的颜色可以是任何有效的 CSS 颜色值。

五、兼容性

box-shadow 在现代浏览器中都有很好的支持,包括 Chrome、Firefox、Safari 和 Edge。但在一些较旧的浏览器版本中,可能需要使用供应商前缀(如 -webkit--moz- 等)来确保兼容性。

六、进阶用法

1. 动画阴影

可以使用 CSS 动画或过渡来动态改变阴影的效果,如改变阴影的颜色、偏移量等。

2. 与边框结合使用

通过将阴影与边框结合使用,可以创建出更丰富的视觉效果,如立体边框效果。

3. 文本阴影

除了用于元素框外,box-shadow 的类似属性 text-shadow 还可以用于为文本添加阴影效果。

七、总结

box-shadow 是一个功能强大的 CSS 属性,通过调整其各个参数,可以轻松创建出各种独特的阴影效果。在网页设计中灵活运用阴影效果,可以使页面更加生动、立体和吸引人。
**性能考量:**复杂的阴影效果,尤其是高模糊度,可能影响页面渲染性能,特别是对于动画或在性能较低的设备上。适度使用以保持性能。
**兼容性:**虽然大多数现代浏览器都支持box-shadow,但针对老旧浏览器(如IE8及更早版本),可能需要考虑使用滤镜等替代方案或渐进增强策略。
**调试与优化:**利用开发者工具的盒模型视图,可以直观地调整阴影参数,找到最佳视觉效果

最后附上投影实例:https://jsrun.net/3R5Kp/

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

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

相关文章

如何简化不同网间文件摆渡的操作流程,降低IT人员工作量?

为了保护内部核心数据不被泄露,同时有效屏蔽外部网络攻击的风险,企业大多会选择实施网络隔离。将“自己人”与“外人”隔离,具有较强的安全敏感性。有些企业还会在内部网络中进一步划分,比如划分为研发网、办公网、生产网等&#…

PaliGemma – 谷歌的最新开源视觉语言模型(一)

引言 PaliGemma 是谷歌推出的一款全新视觉语言模型。该模型能够处理图像和文本输入并生成文本输出。谷歌团队发布了三种类型的模型:预训练(PT)模型、混合(Mix)模型和微调(FT)模型,每…

Vue3实战笔记(48)— reactive大揭秘:Vue 3中复杂数据结构的响应式处理

文章目录 前言reactive 的基本用法1、创建响应式对象:2、在模板中使用响应式对象:3、响应式对象的嵌套: 总结 前言 前些天了解了ref,开发时候大部分时候都是直接用ref,其实还有reactive这玩意,有时候用起来…

C语言实现正弦信号扫频

C语言实现正弦信号扫频 包含必要的头文件:首先,你需要包含 <stdio.h> 和 <math.h> 头文件,分别用于输入输出和数学函数的使用。 定义扫频参数:定义正弦扫频的参数,例如起始频率、结束频率、扫频时间等。 生成正弦波信号:使用正弦函数生成扫频信号,可以根…

【Django】从零开始学Django【2】

五. CBV视图 Django植入了视图类这一功能&#xff0c;该功能封装了视图开发常用的代码&#xff0c;无须编写大量代码即可快速完成数据视图的开发&#xff0c;这种以类的形式实现响应与请求处理称为CBV(Class Base Views)。 1. 数据显示视图 数据显示视图是将后台的数据展示…

C语言 static extern 关键字详解

1、建立2个文件&#xff1b;文件1&#xff1a;file1.c // 文件&#xff1a;counter.c#include <stdio.h>static int count 0; // 声明一个静态全局变量void increment() {count; // 对静态全局变量进行递增操作 } static int n_function() //int n_function() {printf(…

LED屏控制卡是如何控制LED屏的?

LED屏控制卡是LED显示屏的关键组件之一&#xff0c;负责将输入的画面信息转换为LED屏能够显示的数据和控制信号。以下是LED屏控制卡的工作原理和功能的详细介绍&#xff1a; 1. LED显示屏控制器概述&#xff1a; LED显示屏控制器是LED显示屏的核心部件之一&#xff0c;也称为LE…

记一次Chanakya靶机的渗透测试

Chanakya靶机渗透测试 首先通过主机发现发现到靶机的IP地址为:172.16.10.141 然后使用nmap工具对其进行扫描:nmap -sC -sV -sS -p- 172.16.10.141 发现目标靶机开启了80,22,21等多个端口&#xff0c; 访问80端口,发现是一个普通的页面,点击进入多个界面也没有其他有用的信息,然…

前端面试题12-22

12 Proxy是什么&#xff0c;有什么作用&#xff1f; Proxy 是 ES6 (ECMAScript 2015) 引入的一种元编程特性。它允许你创建一个对象&#xff0c;该对象可以拦截和定义基本操作&#xff08;例如属性查找、赋值、枚举、函数调用等&#xff09;。Proxy 提供了一种机制&#xff0c…

Openai革新AI陪伴赛道?国内的AI陪伴创业公司有哪些?

人是一切社会关系的总和&#xff0c;而人的这种社会关系又依靠着情感来联系的。但是自从陪伴式AI的出现仿佛就打破了这种传统的关系。 在你的身边有这样一个“人”&#xff0c;她善解人意、风趣幽默&#xff0c;不会发脾气还会随时陪伴着你&#xff0c;这一在科幻电影中才会出现…

Linux-----sed案例练习

1.数据准备 准备数据如下&#xff1a; [rootopenEuler ~]# cat openlab.txt My name is jock. I teach linux. I like play computer game. My qq is 24523452 My website is http://www.xianoupeng.com My website is http://www.xianoupeng.com My website is http://www.…

解决linux kernel 编译的错误问题

linux 这么大的工程&#xff0c;当你的模块和别人的模块公用一个框架比如DRM 祖爷爷级别的Makefile 给你规定了 -Werrorincompatible-pointer-types 这个时候你又不想用它怎么办呢 就是在你的代码里加上 #pragma GCC diagnostic ignored "-Wincompatible-pointer-types&…

AI作画算法原理

AI作画算法原理详解如下&#xff1a; 一、引言 AI作画是指利用人工智能算法生成图像或绘画的技术。近年来&#xff0c;随着深度学习技术的突破&#xff0c;AI作画已取得了令人瞩目的成果。这些算法能够模拟人类艺术家的创作过程&#xff0c;生成具有艺术性和创意性的图像。 …

振弦采集仪在岩土工程地质灾害监测中的可行性研究

振弦采集仪在岩土工程地质灾害监测中的可行性研究 引言&#xff1a; 岩土工程地质灾害是指在岩土体中由于自然力和人类活动等因素引起的&#xff0c;对人类生活、财产以及环境造成威胁的灾害。为了及时发现并准确监测地质灾害的发生和演化过程&#xff0c;振弦采集仪作为一种新…

计网期末复习指南:物理层(物理层的任务、香农公式、常用信道复用技术)

前言&#xff1a;本系列文章旨在通过TCP/IP协议簇自下而上的梳理大致的知识点&#xff0c;从计算机网络体系结构出发到应用层&#xff0c;每一个协议层通过一篇文章进行总结&#xff0c;本系列正在持续更新中... 计网期末复习指南&#xff08;一&#xff09;&#xff1a;计算机…

零基础想学编程,选择哪一门语言更好?(非常详细)零基础入门到精通就业,收藏这一篇就够了!

&#x1f446;点击关注 获取更多编程干货&#x1f446; 编程语言的用途广泛&#xff0c;它们各自在不同的领域和应用场景中发挥着重要作用。 零基础初学者在选择编程语言时&#xff0c;可以从就业方向入手选择。 Python 就业方向&#xff1a;数据科学、机器学习、人工智能…

基于 IP 的 DDOS 攻击实验

介绍 基于IP的分布式拒绝服务&#xff08;Distributed Denial of Service, DDoS&#xff09;攻击是一种利用大量受控设备&#xff08;通常是僵尸网络&#xff09;向目标系统发送大量请求或数据包&#xff0c;以耗尽目标系统的资源&#xff0c;导致其无法正常提供服务的攻击方式…

3-Django项目继续--初识ModelForm

目录 ModelForm 认识ModelForm 优势 初识Form 初识ModelForm 添加信息 views.py add_student_new.html 修改信息 views.py views.py add_student_new.html ModelForm 认识ModelForm 优势 1、方便校验用户提交的数据 2、页面展示错误提示 3、数据库字段很多的情况…

期望薪资25K,新浪微博测试4轮面试,没想到过了。。

一面60min 1、离职原因 2、简单的算法题&#xff0c;就是我会什么让写什么&#xff1a; 冒泡排序&#xff0c;二分查找&#xff08;其实这么简单&#xff0c;我还是在指引下写出来的&#xff0c;自己实在太菜&#xff09; 3、简历问答&#xff08;随机抽几个点问&#xff0…

云计算期末复习(2)

MapReduce 包含Google MapReduce基本构架、Hadoop MapReduce基本构架 作业&#xff08;问答题&#xff09; &#xff08;1&#xff09;预习论文The Google File System&#xff0c;总结和分析GFS主要特点。 GFS的主要特点包括&#xff1a; 1. 高可靠性和容错性&#xff1a;G…