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

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

news 2026/4/3 12:49:41

边框圆角

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

阿里云购买域名后解析与申请ssl证书并部署到宝塔

1.购买域名 2.解析域名 我们域名可以拆解为二级域名和三级域名等等 首先进入域名管理 https://dc.console.aliyun.com/next/index?spm5176.12818093_47.overview_recent.2.1c0716d0NpJNj1#/domain-list/all然后我们就拿到了二级域名&#xff0c;但是这个时候需要把二级域名和一…...

编程新知 2026/4/3 12:32:32

《数字图像处理》实战：从傅里叶到小波，解锁图像变换的时空密码

1. 图像变换的时空密码&#xff1a;从傅里叶到小波 当你用手机拍摄一张照片时&#xff0c;是否想过这张看似简单的图片背后隐藏着怎样的数学奥秘&#xff1f;图像处理领域的变换技术就像是一把钥匙&#xff0c;能够解开图像中隐藏的时空密码。在众多变换方法中&#xff0c;傅里…...

编程新知 2026/4/3 11:44:05

终极指南：如何用VideoSrt在5分钟内为视频自动生成字幕

终极指南&#xff1a;如何用VideoSrt在5分钟内为视频自动生成字幕 【免费下载链接】video-srt-windows 这是一个可以识别视频语音自动生成字幕SRT文件的开源 Windows-GUI 软件工具。 项目地址: https://gitcode.com/gh_mirrors/vi/video-srt-windows 还在为手动添加字幕…...

编程新知 2026/4/3 11:13:52

vLLM+ERNIE-4.5-0.3B-PT部署全攻略：环境准备、服务启动、前端调用

vLLMERNIE-4.5-0.3B-PT部署全攻略&#xff1a;环境准备、服务启动、前端调用 1. 环境准备与模型部署 1.1 硬件与系统要求 在开始部署ERNIE-4.5-0.3B-PT模型前&#xff0c;需要确保你的系统满足以下最低配置要求&#xff1a; CPU&#xff1a;4核及以上&#xff0c;推荐支持A…...

编程新知 2026/4/3 9:46:54

WeKnora知识库迁移方案：从其他系统平滑过渡

WeKnora知识库迁移方案&#xff1a;从其他系统平滑过渡 1. 引言 知识库迁移听起来可能很复杂&#xff0c;但其实就像搬家一样&#xff0c;只要提前规划好&#xff0c;整个过程可以很顺利。无论你之前用的是Confluence、MediaWiki还是其他知识管理系统&#xff0c;迁移到WeKno…...

编程新知 2026/4/3 9:36:47

JL杰理AC696N系列开发GPIO使用指南：模式、配置与特殊IO

引言GPIO是嵌入式开发最基础也最容易出问题的部分。拉高拉低看起来简单&#xff0c;但驱动能力不够、上下拉没配对、特殊引脚没处理&#xff0c;经常导致外设工作不正常或者功耗异常。JL杰理AC696N的GPIO功能挺全的&#xff0c;有普通、强、超强三种驱动能力&#xff0c;还支持…...

编程新知 2026/4/3 9:30:42

Go Routine 调度策略详解

Go Routine 调度策略详解 Go语言凭借其轻量级的并发模型——Goroutine&#xff0c;成为高并发编程的热门选择。Goroutine的高效运行离不开Go调度器的智能管理&#xff0c;而调度策略则是其核心机制。本文将深入解析Goroutine的调度策略&#xff0c;帮助开发者更好地理解并发执…...

编程新知 2026/4/3 9:16:10

JetBrains IDE试用期重置终极指南：3种简单方法快速延长30天免费使用

JetBrains IDE试用期重置终极指南&#xff1a;3种简单方法快速延长30天免费使用 【免费下载链接】ide-eval-resetter 项目地址: https://gitcode.com/gh_mirrors/id/ide-eval-resetter JetBrains IDE试用期重置工具&#xff08;ide-eval-resetter&#xff09;是一款专门…...

编程新知 2026/4/3 9:10:02

从IDEA到K8s：飞算JavaAI如何打通微服务开发的“最后一公里”

云原生时代的一站式开发革命&#xff1a;当JavaAI遇上Kubernetes 在数字化转型的浪潮中&#xff0c;微服务架构已成为企业技术栈的标配&#xff0c;但随之而来的开发复杂度却让许多团队陷入"最后一公里"困境。传统开发流程中&#xff0c;从本地编码到云端部署需要跨…...

编程新知 2026/4/3 8:16:56

ViGEmBus完全指南：解决游戏控制器兼容性问题的4个关键步骤

ViGEmBus完全指南&#xff1a;解决游戏控制器兼容性问题的4个关键步骤 【免费下载链接】ViGEmBus Windows kernel-mode driver emulating well-known USB game controllers. 项目地址: https://gitcode.com/gh_mirrors/vi/ViGEmBus 在游戏世界中&#xff0c;硬件兼容性问…...

编程新知 2026/4/3 8:04:53