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

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

news 2026/2/10 18:49:08

边框圆角

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

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

编程新知 2025/11/6 5:46:16

业务系统对接大模型的基础方案：架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

编程新知 2026/2/8 4:53:03

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

编程新知 2025/10/22 11:16:20

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2026/2/8 20:42:41

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

编程新知 2026/2/6 23:18:59

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/11/20 2:48:44

Appium+python自动化（十六）- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

编程新知 2026/1/21 18:20:51

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

编程新知 2025/12/10 6:18:55

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

编程新知 2026/2/4 16:13:50

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

编程新知 2026/2/9 17:11:06