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

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

news 2025/8/30 3:45:21

目录

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

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2025/8/29 9:06:29

[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度，导致： 梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...

编程新知 2025/8/19 23:46:57

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

编程新知 2025/8/29 16:43:29

抖音增长新引擎：品融电商，一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

编程新知 2025/8/22 1:45:13

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

编程新知 2025/8/16 22:52:27

多种风格导航菜单 HTML 实现（附源码）

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

编程新知 2025/8/8 5:45:10

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

编程新知 2025/8/7 7:06:16

华硕a豆14 Air香氛版，美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

编程新知 2025/8/26 6:49:38

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

编程新知 2025/6/11 2:44:05

VM虚拟机网络配置（ubuntu24桥接模式）：配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

编程新知 2025/8/27 23:17:48