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

CSS3 新增属性-边框圆角-文字阴影-盒子阴影

news 2025/11/5 18:03:54

边框圆角

CSS 边框圆角可以通过 border-radius 属性来实现。该属性用于设置元素的圆角大小，支持四个值分别表示上左、上右、下右和下左四个角的圆角半径大小，也可以使用两个值分别表示上下和左右两个方向的圆角大小，甚至可以只使用一个值来表示所有四个角的圆角大小。

下面是一个简单的示例，演示如何设置一个圆角矩形：

<!DOCTYPE html>
<html>
<head><style>.box {width: 200px;height: 100px;background-color: #f5f5f5;border-radius: 10px;}</style>
</head>
<body><div class="box"></div>
</body>
</html>

上述代码会在页面中渲染出一个宽200px、高100px、背景颜色为 #f5f5f5 的圆角矩形，四个角的圆角半径大小都为 10px。

可以使用不同的值来设置不同的圆角大小，例如：

border-radius: 15px 5px 10px 20px;

这将会分别设置四个角的圆角半径，从上左角开始，顺时针依次为上右角、下右角和下左角。

还可以使用只有两个值的语法来设置上下和左右两个方向的圆角大小，例如：

border-radius: 15px 10px;

这将会将上下两个方向的圆角半径设置为 15px，左右两个方向的圆角半径设置为 10px。

除此之外，还可以使用单独设置每个角的圆角半径的语法，例如：

border-top-left-radius: 20px;
border-top-right-radius: 10px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 15px;

这将会分别设置元素的四个角的圆角半径大小。

文字阴影

CSS 文字阴影可以通过 text-shadow 属性来实现。该属性用于设置文本的阴影效果，支持设置多个值，每个值表示一个阴影效果，可以包括影子的颜色、位置和模糊半径等属性。

下面是一个简单的示例，演示如何设置文字阴影：

<!DOCTYPE html>
<html>
<head><style>h1 {text-shadow: 2px 2px 4px #000000;}</style>
</head>
<body><h1>Hello, World!</h1>
</body>
</html>

上述代码会在页面中渲染出一个带有阴影效果的标题，阴影颜色为 #000000，位置向右和下方偏移 2px，模糊半径为 4px。

可以将 text-shadow 属性的值设置为多个值，用逗号分隔，来实现多个阴影效果。例如：

text-shadow: 2px 2px 4px #000000, -2px -2px 4px #ffffff;

这将会同时设置两个阴影效果，一个向右和下方偏移 2px，阴影颜色为 #000000，模糊半径为 4px；另一个向左和上方偏移 2px，阴影颜色为 #ffffff，模糊半径为 4px。

可以使用多个阴影效果来实现更复杂的效果，例如：

text-shadow: 1px 1px 1px #000000, -1px -1px 1px #ffffff, 1px -1px 1px #ffffff, -1px 1px 1px #ffffff;

这将会同时设置四个阴影效果，分别位于文本的四个角上，从而实现一种立体感的效果。

盒子阴影

CSS 盒子阴影可以通过 box-shadow 属性来实现。该属性用于为一个盒子元素添加阴影效果，支持设置多个值，每个值表示一个阴影效果，可以包括影子的颜色、位置、模糊半径、扩散半径等属性。

下面是一个简单的示例，演示如何设置盒子阴影：

<!DOCTYPE html>
<html>
<head><style>div {box-shadow: 2px 2px 4px #000000;}</style>
</head>
<body><div>Hello, World!</div>
</body>
</html>

上述代码会在页面中渲染出一个带有阴影效果的 div 元素，阴影颜色为 #000000，位置向右和下方偏移 2px，模糊半径为 4px。

可以将 box-shadow 属性的值设置为多个值，用逗号分隔，来实现多个阴影效果。例如：

box-shadow: 2px 2px 4px #000000, -2px -2px 4px #ffffff;

这将会同时设置两个阴影效果，一个向右和下方偏移 2px，阴影颜色为 #000000，模糊半径为 4px；另一个向左和上方偏移 2px，阴影颜色为 #ffffff，模糊半径为 4px。

可以使用多个阴影效果来实现更复杂的效果，例如：

box-shadow: 1px 1px 1px #000000, -1px -1px 1px #ffffff, 1px -1px 1px #ffffff, -1px 1px 1px #ffffff;

这将会同时设置四个阴影效果，分别位于盒子的四个角上，从而实现一种立体感的效果。

除了位置、颜色和模糊半径等基本属性外，box-shadow 还支持扩散半径（spread radius）等高级属性，例如：

box-shadow: 2px 2px 4px 2px #000000;

这将会为盒子元素添加一个4px 的模糊半径和2px 的扩散半径，使阴影更加细腻和立体。。

相关文章：

CSS3 新增属性-边框圆角-文字阴影-盒子阴影

边框圆角 CSS 边框圆角可以通过 border-radius 属性来实现。该属性用于设置元素的圆角大小&#xff0c;支持四个值分别表示上左、上右、下右和下左四个角的圆角半径大小&#xff0c;也可以使用两个值分别表示上下和左右两个方向的圆角大小&#xff0c;甚至可以只使用一个值来…...

编程日记 2023/10/18 9:43:37

制作.a静态库 (封盒)

//云库房间 1.GitHub上创建开源框架项目须包含文件&#xff1a; LICENSE:开源许可证&#xff1b;README.md:仓库说明文件&#xff1b;开源项目&#xff1b;(登录GitHub官网) 2. 云仓储库构建成功(此时云库中没有内容三方框架)&#xff01;&#xff01;&#xff01; 3. 4.5. //…...

编程日记 2023/10/18 9:41:36

一台服务器，一个新世界

我如何看待服务器 当我拥有一台服务器&#xff0c;我看到的不仅仅是一块硬件&#xff0c;而是一扇打开未来的大门&#xff0c;一个我可以将自己的愿景和创意投射到其中的平台。这台服务器是我的工具&#xff0c;我的画布&#xff0c;我将在其中铸造我的数字梦想。 第一步我要…...

编程日记 2023/10/18 9:40:35

keep-alive 是 Vue 的一个内置组件，用于缓存其他组件的实例，以避免重复渲染和销毁，它可以在需要频繁切换的组件之间提供性能优化

目录 keep-alive 使用 keep-alive 的示例代码&#xff1a; 手动清除组件缓存的示例代码&#xff1a; keep-alive 组件有以下几个优点&#xff1a; keep-alive 的原理&#xff1a; 使用 keep-alive 组件&#xff0c;你可以包裹需要缓存的组件&#xff0c;然后这些组件在切…...

编程日记 2023/10/18 9:39:33

（八）Python类和对象

Python 语言在设计之初&#xff0c;就定位为一门面向对象的编程语言&#xff0c;“Python 中一切皆对象”就是对 Python 这门编程语言的完美诠释。 类和对象是 Python 的重要特征&#xff0c;相比其它面向对象语言&#xff0c;Python 很容易就可以创建出一个类和对象。同时&am…...

编程日记 2023/10/18 9:37:31

黑客利用人工智能窃取医疗数据的 7 种方式

人工智能被描述为医疗保健行业的一把双刃剑。基于人工智能的系统可以分析大量数据并在早期和可治疗的阶段检测疾病&#xff0c;它们可以比任何人类更快地诊断症状&#xff0c;并且人工智能正在帮助药物开发&#xff0c;使新的救命药物得以识别并将其推向市场速度更快且成本显着…...

编程日记 2023/10/18 9:36:30

OJ第四篇

文章目录 链表分割环形链表有效的括号 链表分割 链接: 链表分割 虽然这个题牛客网中只有C,但是无所谓&#xff0c;我们只要知道C是兼容C的就可以了 至于说这个题的思路&#xff0c;我们就弄两个链表&#xff0c;把小于x的结点放到一个链表中&#xff0c;剩下的放到另一个链表…...

编程日记 2023/10/18 9:35:29

L2-022 重排链表

给定一个单链表 L1​→L2​→⋯→Ln−1​→Ln​&#xff0c;请编写程序将链表重新排列为 Ln​→L1​→Ln−1​→L2​→⋯。例如&#xff1a;给定L为1→2→3→4→5→6&#xff0c;则输出应该为6→1→5→2→4→3。 输入格式&#xff1a; 每个输入包含1个测试用例。每个测试用例…...

编程日记 2023/10/18 9:34:27

css 特别样式记录

一、 这段代码神奇的地方在于&#xff0c; 本来容器的宽度只有1200px&#xff0c;如果不给img赋予宽度100%&#xff0c;那么图片 会超出盒子&#xff0c;如果给了img赋予了宽度100%&#xff0c;多个图片会根据自己图片大小的比例&#xff0c;去分完那1200px&#xff0c;如图二。…...

编程日记 2023/10/18 9:33:26

多数元素[简单]

优质博文&#xff1a;IT-BLOG-CN 一、题目 给定一个大小为n的数组nums&#xff0c;返回其中的多数元素。多数元素是指在数组中出现次数大于n/2的元素。你可以假设数组是非空的&#xff0c;并且给定的数组总是存在多数元素。 示例 1&#xff1a; 输入&#xff1a;nums [3,2,3…...

编程日记 2023/10/18 9:32:26

34 个高质量免费教育资源

&#x1f9d1;‍&#x1f393; 综合型在线学习网站&#xff1a;21个 &#x1f6dc; 专业类在线教育网站&#xff1a;13个 ⬇️⬇️⬇️ 0 examtopics www.examtopics.cn 专业的AWS等IT认证考试题库 一、综合型在线学习网站 1、Coursera coursera.org 美国斯坦福大学两名计算机…...

编程日记 2023/10/18 9:31:25

基础课5——语音合成技术

TTS是语音合成技术的简称&#xff0c;也称为文语转换或语音到文本。它是指将文本转换为语音信号&#xff0c;并通过语音合成器生成可听的语音。TTS技术可以用于多种应用&#xff0c;例如智能语音助手、语音邮件、语音新闻、有声读物等。 TTS技术通常包括以下步骤&#xff1a; …...

编程日记 2023/10/18 9:30:23

安全事件报告和处置制度

1、总则 1.1、目的 为了严密规范XXXXX单位信息系统的安全事件处理程序&#xff0c;确保各业务系统的正常运行和系统及网络的安全事件得到及时响应、处理和跟进&#xff0c;保障网络和系统持续安全运行&#xff0c;确保XXXXX单位重要计算机信息系统的实体安全、运行安全和数据…...

编程日记 2023/10/18 9:29:22

java干掉 if-else

前言 传统做法-if-else分支 策略模式Map字典 责任链模式 策略模式注解 物流行业中&#xff0c;通常会涉及到EDI报文(XML格式文件)传输和回执接收&#xff0c;每发送一份EDI报文&#xff0c;后续都会收到与之关联的回执&#xff08;标识该数据在第三方系统中的流转状态&#xff…...

编程日记 2023/10/18 9:28:20

29 Python的pandas模块

概述 在上一节&#xff0c;我们介绍了Python的numpy模块&#xff0c;包括&#xff1a;多维数组、数组索引、数组操作、数学函数、线性代数、随机数生成等内容。在这一节&#xff0c;我们将介绍Python的pandas模块。pandas模块是Python编程语言中用于数据处理和分析的强大模块&a…...

编程日记 2023/10/18 9:27:19

树叶识别系统python+Django网页界面+TensorFlow+算法模型+数据集+图像识别分类

一、介绍 树叶识别系统。使用Python作为主要编程语言开发&#xff0c;通过收集常见的6中树叶&#xff08;‘广玉兰’, ‘杜鹃’, ‘梧桐’, ‘樟叶’, ‘芭蕉’, ‘银杏’&#xff09;图片作为数据集&#xff0c;然后使用TensorFlow搭建ResNet50算法网络模型&#xff0c;通过对…...

编程日记 2023/10/18 9:26:19

【问题解决：配置】解决spring mvc项目 get请求 获取中文字符串参数 乱码

get类型请求的发送过程 前端发送一个get请求的过程&#xff1a; 封装参数进行URL编码&#xff0c;也就是将中文编码成一个带有百分号的字符串&#xff0c;具体可以在这个网站进行测试。http://www.esjson.com/urlEncode.html 进行Http编码&#xff0c;这里浏览器或者postman都…...

编程日记 2023/10/18 9:24:16

python每日一练(9)

&#x1f308;write in front&#x1f308; &#x1f9f8;大家好&#xff0c;我是Aileen&#x1f9f8;.希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流. &#x1f194;本文由Aileen_0v0&#x1f9f8; 原创 CSDN首发&#x1f412; 如…...

编程日记 2023/10/18 9:23:15

JVM第十四讲：调试排错 - Java 内存分析之堆内存和MetaSpace内存

调试排错 - Java 内存分析之堆内存和MetaSpace内存 本文是JVM第十四讲&#xff0c;以两个简单的例子(堆内存溢出和MetaSpace (元数据) 内存溢出&#xff09;解释Java 内存溢出的分析过程。 文章目录 调试排错 - Java 内存分析之堆内存和MetaSpace内存1、常见的内存溢出问题(内存…...

编程日记 2023/10/18 9:21:11

【1day】泛微e-office OA SQL注入漏洞学习

注：该文章来自作者日常学习笔记，请勿利用文章内的相关技术从事非法测试，如因此产生的一切不良后果与作者无关。 目录 一、漏洞描述 二、影响版本 三、资产测绘 四、漏洞复现...

编程日记 2023/10/18 9:20:10

（十）学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

编程新知 2025/10/30 4:27:23

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

编程新知 2025/10/8 10:56:25

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

编程新知 2025/11/2 2:49:54

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

编程新知 2025/10/20 22:01:31

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

编程新知 2025/11/4 20:02:49

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

编程新知 2025/10/16 1:31:30

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程新知 2025/10/31 17:03:04

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2025/10/27 13:41:34

学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

编程新知 2025/10/27 13:41:17

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

编程新知 2025/10/29 4:33:03