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

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

news 文章来源：https://blog.csdn.net/weixin_68773927/article/details/129062773 2024/11/18 12:33:45

目录

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

关于cFosSpeed如何配置

cFosSpeed配置一、检查Calibration Done情况二、优化Ping时间和线路校准三、测网速四、cFosSpeed控制台五、配置参数一、检查Calibration Done情况 安装完毕&#xff0c;激活成功后。 右键------>选项------>设置&#xff0c; 打开适配器信息&#xff0c;查看Calibra…...

编程日记 2023/2/16 19:41:38

YOLOV5输出的txt里面有什么猫腻（用于图像分类竞赛中提升图像信息密度）

背景概括&#xff1a; kaggle最近举办了一场医学乳腺癌检测的比赛&#xff08;图像分类&#xff09; 比赛官网地址 给的数据是dcm的专业的医学格式&#xff0c;自己通过DICOM库转为png后&#xff0c;发现该图像胸部不同的患者乳腺大小不一&#xff0c;简言之乳腺的CT有效图在…...

编程日记 2023/2/16 19:40:31

vue+axios常用操作

vueaxios常用操作vue2axios请求拦截依赖项http.jsvue2axios设置请求头依赖项http.js获取并设置请求头api.jsa.vuevue2axios请求拦截 依赖项 “vue”: “^2.6.11” “axios”: “^0.21.0” “element-ui”: “^2.13.2”(做弹窗提示&#xff0c;可以不用) http.js // 引入axi…...

编程日记 2023/2/16 19:39:21

Xshell连接阿里云服务器搭建网站

一、建设一个网站的基本要求 申请一个独立的域名申请一台云服务器ECS在服务器上安装网站环境&#xff0c;如&#xff1a;Apache发布网站内容至云服务器将第一步注册的域解析至云服务器的外网IP地址进行ICP备案 二、用户访问网站的过程 在浏览器上输入域名浏览器自动调用DNS&…...

编程日记 2023/2/16 19:38:15

嵌入式ARM设计编程(三) 处理器工作模式

文章和代码已归档至【Github仓库&#xff1a;hardware-tutorial】&#xff0c;需要的朋友们自取。或者公众号【AIShareLab】回复 嵌入式 也可获取。 一、实验目的 &#xff08;1&#xff09; 通过实验掌握学会使用msr/mrs 指令实现ARM 处理器工作模式的切换&#xff0c;观察不…...

编程日记 2023/2/16 19:37:08

jenkins构建报错：.java:16: error: package javafx.util does not exist

1、报错 jenkins构建报错 package javafx.util does not exist2、报错原因 代码发现使用了javafx类&#xff0c;该类仅存在OracleJDK中&#xff0c;OpenJDK中没有该类。 jenkins服务器安装的是openjdk 3、卸载OpenJDK 具体不概述了 4、离线安装OracleJDK 1&#xff09;…...

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

【第三天】策略模式

前言 策略模式是针对不同算法给出不同实现的方式&#xff0c;解耦代码&#xff0c;减少代码中if.....else代码书写量。 一、策略模式UNL类图 对象角色Context 上下文对象&#xff0c;依赖Strategy接口&#xff0c;一般像Context传入Strategy实现对象&#xff0c;执行策略方法…...

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

以应用为导向，看声纹识别中的音频伪造问题

声纹识别&#xff0c;又称说话人识别&#xff0c;是根据语音信号中的声纹特征来识别话者身份的过程&#xff0c;也是一种重要的生物认证手段。历经几十年的研究&#xff0c;当前声纹识别系统已取得了令人满意的性能表现&#xff0c;并在安防、司法、金融、家居等诸多领域中完成…...

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

RocketMQ源码分析之CommitLog消息存储机制

1、消息存储分析 1.1 DefaultMessageStore 概要 其核心属性如下&#xff1a; messageStoreConfig 存储相关的配置&#xff0c;例如存储路径、commitLog文件大小&#xff0c;刷盘频次等等。CommitLog commitLog comitLog 的核心处理类&#xff0c;消息存储在 commitlog 文件中…...

编程日记 2023/2/16 19:32:35

亿级高并发电商项目-- 实战篇 --万达商城项目 九（广告服务、安装Redis优化用户缓存、广告服务实现类等开发）

专栏&#xff1a;高并发---分布式项目 亿级高并发电商项目-- 实战篇 --万达商城项目搭建 一 &#xff08;商家端与用户端功能介绍、项目技术架构、数据库表结构等设计&#xff09; 亿级高并发电商项目-- 实战篇 --万达商城项目搭建 一 &#xff08;商家端与用户端功能介绍、项…...

编程日记 2023/2/16 19:31:27

做黑时时彩的网站/seo系统推广

PSpice已经成为模拟电路仿真使用的行业标准工具。模拟电路具有真实的物理实现&#xff0c;可以用它们的原理示意图进行仿真&#xff0c;其频率响应是电路时间常数的结果。与之相反的是&#xff0c;数字滤波器对一系列样本进行数学运算。 数字滤波器的时间常数隐藏在采样间隔T中…...

编程日记 2024/11/18 11:28:11

wordpress图片上传失败/网址推广

目录传送门&#xff1a;《Flutter快速上手指南》先导篇在 Dart 中&#xff0c;仅使用 int 和 double 两种数据类型来表示整数和浮点数。int不同于 Java 等语言&#xff0c;在 Dart 中&#xff0c;int 的取值范围是 -2^63 &#xff5e; 2^63 - 1 。var x 1; var hex 0xDEADBEE…...

编程日记 2024/11/18 7:42:37

电子商务网站推广方法和技巧/广州推广引流公司

兰州计算机学校排行情况得到了很多学生和家长的关注。我国计算机事业飞速发展&#xff0c;特别是在最近几年的计算机发展都是我们有目共睹和亲身体验的。伴随着网络时代的发展&#xff0c;计算机行业急需热门专业的人才也是受到现在初高中应往届毕业生的亲睐。下文3721职校网就…...

编程日记 2024/11/18 4:28:40

成都免费建站模板/中国经济网人事

2.5.3二维数组数据类型 数组名[第一维][第二维];二维数组在定义的时候进行初始化&#xff0c;二维数组在初始化的时候&#xff0c;需要按照第一维顺序依次用大括号给出第二维初始化的情况&#xff0c;然后将他们用逗号分隔并且用大括号全部括住&#xff0c;而在这些被赋予初值的…...

编程日记 2024/11/18 3:35:04

委托做的网站版权归属/软文代写平台

Windows下vagrant up出现蓝屏的解决办法 版权声明&#xff1a;尊重原创喔&#xff0c;转载请注明 https://blog.csdn.net/lgyaxx/article/details/79333462今天在Windows 10下装了个docker for windows&#xff0c;结果发现问题多多&#xff0c;虽然说container有优势&#xff…...

编程日记 2024/11/18 2:41:13

wordpress电影网盘/最新行业动态

workbox 是 GoogleChrome 团队推出的一套 Web App 静态资源本地存储的解决方案&#xff0c;该解决方案包含一些 Js 库和构建工具&#xff0c;在 Chrome Submit 2017 上首次隆重面世。而在 workbox 背后则是 Service Worker 和 Cache API 等技术和标准在驱动。在 Workebox 之前&…...

编程日记 2024/11/17 22:02:22