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

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

news 2026/2/10 20:01:51

边框圆角

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

UE5 学习系列（二）用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

编程新知 2026/2/10 11:02:44

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

编程新知 2026/2/10 4:35:17

FastAPI 教程：从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

编程新知 2025/10/16 7:51:26

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

编程新知 2026/1/30 13:40:43

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2026/2/1 13:28:03

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

编程新知 2026/2/10 15:49:16

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

编程新知 2026/1/31 14:55:53

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

编程新知 2026/2/10 11:09:10

MySQL账号权限管理指南：安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

编程新知 2025/9/5 23:36:27

NPOI操作EXCEL文件 ——CAD C# 二次开发

缺点:dll.版本容易加载错误。CAD加载插件时&#xff0c;没有加载所有类库。插件运行过程中用到某个类库&#xff0c;会从CAD的安装目录找&#xff0c;找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库&#xff0c;就用插件程序加载进…...

编程新知 2026/1/26 13:35:42