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

CSS 圆角边框 盒子阴影 文字阴影

news 2026/2/9 12:26:57

目录

1.圆角边框（重点）

2.盒子阴影（box-shadow）

3.文字阴影（text-shadow）

1.圆角边框（重点）

border-radius 属性用于设置元素的外边框圆角。

语法：

       border-radius: length;

 radius半径（圆的半径）原理:(椭)圆与边框的交集形成圆角效果。

!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 300px;height: 150px;background-color: pink;border-radius: 10px;}</style>
</head><body><div><div class="header">C罗</div></div>
</body>

使用：语法：border-radius：length;

  • 参数值可以为数值或者百分比的形式。
  • 如果是正方形，想要设置一个圆，数值为高度或者宽度的一般，百分比为50%。
  • 如果是一个矩形，设置为高度的一般。
  • 该属性是一个简写属性，可以跟随四个值，分别代表左上角，右上角，左下角，右下角。
  • 分开写： border-top-left-radius，border-top-right-radius，border-bottom-right-radius，border-bottom-bottom-radius。

2.盒子阴影（box-shadow）

在css3中新增盒子阴影 box-shadow

语法：  box-shadow：h-shadow  v-shadow  blur spread color inset；

值描述
h-shadow必需，水平阴影的位置允许负值
v-shadow必需，垂直阴影的位置允许负值
blur可选，模糊距离
spread可选，阴影的尺寸
color可选，阴影的颜色，请参照CSS颜色值
inset可选，将外部阴影（outset）改为内部阴影

半透明：rgba（0,0,0, .3）

注意：

  • 默认的是外部阴影（outset）但是不可以写这个单词，否则导致阴影无效。
  • 盒子阴影不占空间，不会影响其他盒子排列。 

3.文字阴影（text-shadow）

语法：

  text-shadow：h-shadow  v-shadow  blur  color ；

值描述
h-shadow必需，水平阴影的位置允许负值
v-shadow必需，垂直阴影的位置允许负值
blur可选，模糊距离
color可选，阴影的颜色，请参照CSS颜色值

相关文章：

CSS 圆角边框 盒子阴影 文字阴影

目录 1.圆角边框&#xff08;重点&#xff09; 2.盒子阴影&#xff08;box-shadow&#xff09; 3.文字阴影&#xff08;text-shadow&#xff09; 1.圆角边框&#xff08;重点&#xff09; border-radius 属性用于设置元素的外边框圆角。 语法&#xff1a; border-radius: l…...

编程日记 2023/2/16 20:03:53

python简单解析打印onnx模型信息

当我们加载了一个ONNX之后&#xff0c;我们获得的就是一个ModelProto&#xff0c;它包含了一些版本信息&#xff0c;生产者信息和一个GraphProto。在GraphProto里面又包含了四个repeated数组&#xff0c;它们分别是node(NodeProto类型)&#xff0c;input(ValueInfoProto类型)&a…...

编程日记 2023/2/16 20:02:48

UE4 编写着色器以及各种宏的理解

参考链接&#xff1a;如何为 UE4 添加全局着色器&#xff08;Global Shaders&#xff09; - Unreal Enginehttps://docs.unrealengine.com/5.1/zh-CN/adding-global-shaders-to-unreal-engine/如何为 UE4 添加全局着色器&#xff08;Global Shaders&#xff09; - Unreal Engin…...

编程日记 2023/2/16 20:01:40

小笔记：Python 使用字符串调用函数

小笔记&#xff1a;Python中如何使用字符串调用函数/方法&#xff1f;jcLee95&#xff1a;https://blog.csdn.net/qq_28550263?spm1001.2101.3001.5343 本文地址&#xff1a;https://blog.csdn.net/qq_28550263/article/details/111874476 邮箱 &#xff1a;291148484163.co…...

编程日记 2023/2/16 20:00:35

红黑树的原理+实现

文章目录红黑树定义性质红黑树的插入动态效果演示代码测试红黑树红黑树 定义 红黑树是一个近似平衡的搜索树&#xff0c;关于近似平衡主要体现在最长路径小于最短路径的两倍&#xff08;我认为这是红黑树核心原则&#xff09;&#xff0c;为了达到这个原则&#xff0c;红黑树所…...

编程日记 2023/2/16 19:59:30

用于非线性时间序列预测的稀疏局部线性和邻域嵌入（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/2/16 19:58:24

使用 Vue3 重构 Vue2 项目

目录前言&#xff1a;一、项目整体效果展示二、项目下载使用方法三、为什么要重构项目四、重构的流程五、步骤中的 bug 以及解决方式六、未解决的问题总结&#xff1a;前言&#xff1a; 2020年9月18日&#xff0c;vue3正式版发布了&#xff0c;前几天学习完成后&#xff0c;我决…...

编程日记 2023/2/16 19:57:19

Hive学习——单机版Hive的安装

目录 一、基本概念 (一)什么是Hive (二)优势和特点 (三)Hive元数据管理 二、Hive环境搭建 1.自动安装脚本 2./opt/soft/hive312/conf目录下创建hive配置文件hive-site.xml 3.拷贝一个jar包到hive下面的lib目录下 4.删除hive的guava&#xff0c;拷贝hadoop下的guava 5…...

编程日记 2023/2/16 19:56:13

uprobe 实战

观测数据源 目前按照我的理解&#xff0c;和trace相关的常用数据源–探针 大致分为四类。 内核 Trace point kprobe 用户程序 USDT uprobe 在用户程序中&#xff0c;USDT是所谓的静态Tracepoint。和内核代码中的Trace point类似。实现方式是在代码开发时&#xff0c;使用USDT…...

编程日记 2023/2/16 19:55:06

华为OD机试 - 求最大数字（Python）| 真题+思路+考点+代码+岗位

求最大数字 题目 给定一个由纯数字组成以字符串表示的数值，现要求字符串中的每个数字最多只能出现2次，超过的需要进行删除；删除某个重复的数字后，其它数字相对位置保持不变。 如34533，数字3重复超过2次，需要删除其中一个3，删除第一个3后获得最大数值4533 请返回经过删…...

编程日记 2023/2/16 19:53:59

雨水情测报与大坝安全监测系统

压电式雨量传感器产品概述传感器由上盖、外壳和下盖组成&#xff0c;壳体内部有压电片和电路板&#xff0c;可以固定在外径50mm立柱上和气象站横杆上。传感器采用冲击测量原理对单个雨滴重量进行测算&#xff0c;进而计算降雨量。雨滴在降落过程中受到雨滴重量和空气阻力的作用…...

编程日记 2023/2/16 19:52:52

抖音广告投放形式有哪些?新品牌进入抖音怎么建立口碑

坐拥5亿用户的抖音平台&#xff0c;已经成为各大品牌的兵家必争之地。想要在这块宣传的“高地”&#xff0c;做出声量&#xff0c;就必须了解抖音广告投放形式有哪些。这里整理的这份抖音广告投放指南&#xff0c;你一定不能错过。一、抖音为何如此牛想要弄清楚抖音广告的投放形…...

编程日记 2023/2/16 19:51:46

Beefxss使用教程图文教程（超详细）

「作者主页」&#xff1a;士别三日wyx 「作者简介」&#xff1a;CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 Beefxss一、首次使用二、修改账号密码三、自带练习页面四、简单使用五、工具界面介绍六、功能演示1、网页重定向2、社工弹窗3、功能颜色标识…...

编程日记 2023/2/16 19:50:36

【Python学习笔记】35.Python3 CGI编程(2)

前言 本章继续介绍Python的CGI编程。 通过CGI程序传递checkbox数据 checkbox用于提交一个或者多个选项数据&#xff0c;HTML代码如下&#xff1a; 实例 <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>csdn教程(csd…...

编程日记 2023/2/16 19:49:28

博客等级说明

CSDN 博客等级是按照用户的博客积分数量进行的设定&#xff0c;为 Lv1 至 Lv10 共 10 个等级&#xff0c;不同的等级创作者可以享受到不同的权益待遇。例如&#xff0c;皮肤奖励、自定义域名、客服优先处理、自定义文章标签等特权。您需要提高博客积分进一步提升等级&#xff0…...

编程日记 2023/2/16 19:48:20

STL——容器适配器、deque

一、容器适配器 1.适配器 适配器是一种设计模式&#xff08;设计模式是一套被反复使用的、多数人所知晓的、经过分类编目的、代码设计经验的总结&#xff09;&#xff0c;该种模式是将一个类的接口转换成客户希望的另外一个接口。 2.STL标准库中stack和queue的底层结构 stack…...

编程日记 2023/2/16 19:47:14

VBA数组和Excel工作表数据传递

本文介绍如何利用 VBA 的数组&#xff08;Array) 来提高 Excel 单元格和外部数据传输的性能。如果数量比较大&#xff0c;通过 Array 来传输数据比直接操作单元格要快若干倍。 将 Range 的数据写入 VBA Array 将 Range 数据写入 VBA 的数组非常简单。下面的例子演示了用法&am…...

编程日记 2023/2/16 19:46:06

PyQt5保姆级入门教程——从安装到使用

目录 Part1&#xff1a;安装PyQt5 Part 2&#xff1a;PyCharm配置PyQt5 Part 3&#xff1a;PyQt5设计界面介绍 Part 4&#xff1a;PyQt5设计UI 今天看了多个大佬的教程&#xff0c;总算是把PyQt5开发弄好了&#xff0c;每个部分都要看几个人的十分不方便&#xff0c;我十分…...

编程日记 2023/2/16 19:44:59

1.6 epoll实战使用

文章目录1、连接池2、epoll两种工作模式2.1、LT模式2.2、ET模式3、后端开发面试题4、epoll验证1、连接池 将每一个套接字和一块内存进行绑定&#xff0c;连接池就是一个结构体数组&#xff0c;通过链表来维护一个空闲连接。 1、ngx_get_connection(int fd)从空闲链表取一个空闲…...

编程日记 2023/2/16 19:43:51

JDK定时、Spring定时、时间轮定时小结

Timer使用一个线程&#xff0c;一个小根堆。线程执行根上的任务&#xff0c;小根堆会根据执行时间戳重新调整&#xff0c;根上的任务是下一个执行的任务。 DelayedQueue维护一个优先级队列&#xff0c;本质也是一个数组方式的堆。任务生成时也有时间戳&#xff0c;只提供存储。…...

编程日记 2023/2/16 19:42:44

AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南

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

编程新知 2026/2/8 5:11:39

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

编程新知 2025/11/8 0:24:13

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

编程新知 2025/10/6 16:38:04

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

编程新知 2026/2/3 22:50:07

Frozen-Flask ：将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

编程新知 2025/12/5 20:57:13

安卓基础（aar）

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

编程新知 2026/1/25 8:10:56

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机&#xff0c;它可以执行Java字节码。Java虚拟机是Java平台的一部分&#xff0c;Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

编程新知 2025/9/13 18:20:34

第八部分：阶段项目 6：构建 React 前端应用

现在&#xff0c;是时候将你学到的 React 基础知识付诸实践&#xff0c;构建一个简单的前端应用来模拟与后端 API 的交互了。在这个阶段&#xff0c;你可以先使用模拟数据&#xff0c;或者如果你的后端 API&#xff08;阶段项目 5&#xff09;已经搭建好&#xff0c;可以直接连…...

编程新知 2025/9/21 1:58:01

记一次spark在docker本地启动报错

1&#xff0c;背景 在docker中部署spark服务和调用spark服务的微服务&#xff0c;微服务之间通过fegin调用 2&#xff0c;问题&#xff0c;docker容器中服务器来后&#xff0c;注册中心都有&#xff0c;调用服务也正常&#xff0c;但是调用spark启动任务后报错&#xff0c;报错…...

编程新知 2025/11/29 7:27:13

数据库管理与高可用-MySQL故障排查与生产环境优化

目录 #1.1MySQL单案例故障排查 1.1.1MySQL常见的故障排查 1.1.2MySQL主从故障排查 #2.1MySQL优化 2.1.1硬件方面的优化 2.1.2进程方面的优化 #3.1MySQL存储引擎 3.1.1 MyISAM存储引擎 3.1.2 InnoDB存储引擎 1.1MySQL单案例故障排查 1.1.1MySQL常见的故障排查 &#xff08;1&…...

编程新知 2026/2/7 15:27:29