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

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

目录

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…...

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

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

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…...

小笔记: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…...

红黑树的原理+实现

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

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

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

使用 Vue3 重构 Vue2 项目

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

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…...

uprobe 实战

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

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

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

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

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

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

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

Beefxss使用教程图文教程(超详细)

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

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

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

博客等级说明

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

STL——容器适配器、deque

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

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

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

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

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

1.6 epoll实战使用

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

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

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

日语零基础每天学习笔记【01-10】

第一天 日语五十音&#xff1a;平假名/片假名发音あア いイ うウ えエ おオaかカ きキ くク けケ こコkaさサ しシ すス せセ そソsaたタ ちチ つツ てテ とトtaなナ にニ ぬヌ ねネ のノnaはハ ひヒ ふフ へヘ ほホhaまマ みミ むム めメ もモmaや…...

避免这些坑!Unity2D界面转换中常见的动画事件处理问题及解决方案

避免这些坑&#xff01;Unity2D界面转换中常见的动画事件处理问题及解决方案 在Unity2D游戏开发中&#xff0c;界面转换是提升用户体验的关键环节。一个流畅的淡入淡出效果能让场景切换更加自然&#xff0c;但很多开发者在实际操作中常会遇到动画事件不触发、协程执行异常等问题…...

Dify向量检索精度跃升47%的秘密(重排序Pipeline低延迟部署避坑手册)

第一章&#xff1a;Dify重排序算法精度跃升47%的核心动因解析Dify v0.12.0 引入的重排序&#xff08;Reranking&#xff09;模块并非简单叠加模型&#xff0c;而是通过三重协同优化机制实现精度质变。核心突破在于将传统单阶段打分范式升级为「语义对齐—上下文感知—动态归一化…...

3个核心革新让英雄联盟玩家彻底告别繁琐游戏操作

3个核心革新让英雄联盟玩家彻底告别繁琐游戏操作 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 在快节奏的英雄联盟对局中&#…...

探索Java字节码的秘密:专业级反编译工具实战指南

探索Java字节码的秘密&#xff1a;专业级反编译工具实战指南 【免费下载链接】jd-gui A standalone Java Decompiler GUI 项目地址: https://gitcode.com/gh_mirrors/jd/jd-gui Java反编译工具是中级开发者提升代码分析效率的关键利器&#xff0c;它能够将编译后的字节码…...

别再只盯着标定板了!用ROS camera_calibration搞定海康工业相机,这5个细节决定成败

工业相机标定进阶指南&#xff1a;ROS camera_calibration的五个关键优化点 工业相机的标定质量直接决定了机器视觉系统的测量精度。许多开发者虽然能够完成基础标定流程&#xff0c;却常常在参数解读和精度优化环节遇到瓶颈。本文将深入解析ROS camera_calibration工具在实际工…...

Vision Transformers在密集预测任务中的创新应用与性能优化

1. Vision Transformers如何革新密集预测任务 第一次接触Vision Transformers&#xff08;ViT&#xff09;时&#xff0c;我完全被它的设计哲学震撼到了。传统的CNN在处理图像时&#xff0c;就像用固定大小的网格去观察世界&#xff0c;而ViT则像是一个拥有"全局视野"…...

ESP32-C3开发环境搭建(VSCode+ESP-IDF)与串口占用疑难排查实战

1. ESP32-C3开发环境搭建全攻略 第一次接触ESP32-C3开发板时&#xff0c;我和大多数开发者一样&#xff0c;被环境搭建这个"入门杀"折腾得够呛。特别是使用合宙经典款开发板时&#xff0c;USB转串口芯片带来的各种"惊喜"让人措手不及。这里分享一套经过实战…...

纯化水系统HMI与PLC协同控制:从界面设计到逻辑实现

1. 纯化水系统控制的核心技术组合 在制药行业的纯化水系统中&#xff0c;HMI&#xff08;人机界面&#xff09;与PLC&#xff08;可编程逻辑控制器&#xff09;的协同工作堪称自动化控制的黄金搭档。这套系统就像是一个精密的"大脑神经中枢"组合——PLC负责底层设备的…...

【大模型】-名词手册-扫盲

写在前面 本篇文章用来记录在了解学习大模型的过程中遇到的一些名词缩写&#xff0c;好记性不如烂笔头&#xff0c;记录下来&#xff0c;也供大家参考。如有不正确的&#xff0c;欢迎指正。 目录写在前面名词扫盲写在后面名词扫盲 分类缩写英文全程中文备注-----智能体通信协议…...