CSS圆角
在制作网页的过程中，有时我们可能需要实现圆角的效果，以前的做法是通过切图（将设计稿切成便于制作成页面的图片），使用多个背景图像来实现圆角。在 CSS3
出现之后就不需要这么麻烦了，CSS3 中提供了一系列属性来设置元素的圆角效果，如下所示：
- border-top-left-radius：为元素左上角设置圆角效果；
- border-top-right-radius：为元素右上角设置圆角效果；
- border-bottom-right-radius：为元素右下角设置圆角效果；
- border-bottom-left-radius：为元素左下角设置圆角效果；
- border-radius：上面四个属性的简写形式，可以同时为元素的四个角设置圆角效果。
上述函数的可选值如下表所示：
| 值 | 描述 |
|---|---|
| length | 通过数值加单位的形式定义圆角的形状 |
| percentage | 以百分比的形式定义圆角的形状 |
border-*-radius
通过上面的介绍我们知道，通过 border-*-radius 系列函数能够分别为元素的四个角设置圆角效果，函数的语法格式如下：
border-*-radius：[ | ]{1,2}
语法的含义为，需要为 border-*-radius 属性提供 1~2
个参数，参数之间使用空格进行分隔。其中第一个参数表示圆角水平方向的半径或半轴，第二个参数表示圆角垂直方向的半径或半轴，如果省略第二个参数，那么该参数将直接沿用第一个参数的值。
图：元素四角
【示例】使用四个 border-*-radius 属性为元素设置圆角效果：
<!DOCTYPE html><html lang="en"><head><style>div {width: 350px;height: 100px;padding: 15px 0px 0px 25px;}.one {border-top-left-radius: 2em 0.5em;border-top-right-radius: 1em 3em;border-bottom-right-radius: 4em 0.5em;border-bottom-left-radius: 1em 3em;background-color: #CCC;margin-bottom: 10px;}.two {border-top-left-radius:2em;border-top-right-radius:2em;border-bottom-right-radius:2em;border-bottom-left-radius:2em;background-color: #888;}</style> </head><body><div class="one">border-top-left-radius: 2em 0.5em;<br>border-top-right-radius: 1em 3em;<br>border-bottom-right-radius: 4em 0.5em;<br>border-bottom-left-radius: 1em 3em;</div><div class="two">border-top-left-radius:2em;<br>border-top-right-radius:2em;<br>border-bottom-right-radius:2em;<br>border-bottom-left-radius:2em;</div></body></html>
运行结果如下图所示：
图：border-*-radius 属性演示
border-radius
border-radius 属性是 border-top-left-radius、border-top-right-radius、border-
bottom-right-radius、border-bottom-left-radius 四个属性的简写形式，使用 border-radius
可以同时设置四个 border-*-radius 属性。border-radius 属性的格式如下：
border-radius：[ | ]{1,4} [ / [ | ]{1,4} ]?
语法说明如下：
- border-radius 属性可以接收两组参数，参数之间使用斜杠
/进行分隔，每组参数都允许设置 1~4 个参数值，其中第一组参数代表圆角水平方向上的半径或半轴，第二组参数代表圆角垂直方向上的半径或半轴，如果省略第二组参数的值，那么该组参数将直接沿用第一组参数的值。 - 第一组参数中，如果提供全部的四个参数，那么将按照上左 top-left、上右 top-right、下右 bottom-right、下左 bottom-left 的顺序作用于元素的四个角；如果提供三个参数，那么第一个参数将作用于元素的左上角 top-left，第二个参数将作用于元素的右上角 top-right 和左下角 bottom-left，第三个参数将作用于元素的右下角 bottom-right；如果提供两个参数，那么第一个参数将作用于元素的左上角 top-left 和右下角 bottom-right，第二个参数将作用于元素的右上角 top-right 和左下角 bottom-left；如果只提供一个参数，那么该参数将同时作用于元素的四个角。
- 第二组参数同样遵循第一组参数的规律，只是作用的方向不同。
【示例】使用 border-radius 属性为元素设置圆角效果：
<!DOCTYPE html><html><head><style>ul {margin: 0;padding: 0;}li {list-style: none;margin: 10px 0 0 10px;padding: 10px;width: 200px;float: left;background: #bbb;}h2 {clear: left;}.test .one {border-radius: 10px;}.test .two {border-radius: 10px 20px;}.test .three {border-radius: 10px 20px 30px;}.test .four {border-radius: 10px 20px 30px 40px;}.test2 .one {border-radius: 10px/5px;}.test2 .two {border-radius: 10px 20px/5px 10px;}.test2 .three {border-radius: 10px 20px 30px/5px 10px 15px;}.test2 .four {border-radius: 10px 20px 30px 40px/5px 10px 15px 20px;}</style></head><body><h2>水平与垂直半径相同时：</h2><ul class="test"><li class="one">提供1个参数<br>border-radius:10px;</li><li class="two">提供2个参数<br>border-radius:10px 20px;</li><li class="three">提供3个参数<br>border-radius:10px 20px 30px;</li><li class="four">提供4个参数<br>border-radius:10px 20px 30px 40px;</li></ul><h2>水平与垂直半径不同时：</h2><ul class="test2"><li class="one">提供1个参数<br>border-radius:10px/5px;</li><li class="two">提供2个参数<br>border-radius:10px 20px/5px 10px;</li><li class="three">提供3个参数<br>border-radius:10px 20px 30px/5px 10px 15px;</li><li class="four">提供4个参数<br>border-radius:10px 20px 30px 40px/5px 10px 15px 20px;</li></ul></body></html>
运行结果如下图所示：
图：border-radius 属性演示
原文地址CSS圆角
相关文章：
CSS圆角
在制作网页的过程中，有时我们可能需要实现圆角的效果，以前的做法是通过切图（将设计稿切成便于制作成页面的图片），使用多个背景图像来实现圆角。在 CSS3 出现之后就不需要这么麻烦了，CSS3 中提供了一系列属性…...
信息安全工程师（37）防火墙概述
前言 防火墙是一种网络安全系统，旨在监控和控制网络流量，根据预定义的安全规则决定是否允许数据包的传输。 一、定义与功能 定义：防火墙是网络安全的第一道防线，由硬件设备和软件系统共同构成，位于外网与内网之间、公共…...
多元化网络团队应对复杂威胁
GenAI、ML 和 IoT 等技术为威胁者提供了新的工具，使他们更容易针对消费者和组织发起攻击。 从诱骗受害者陷入投资骗局的Savvy Seahorse ，到使用 ChatGPT 之类的程序感染计算机并阅读电子邮件的自我复制 AI 蠕虫，新的网络威胁几乎每天都在出现…...
)
Observer(观察者模式)
1. 意图 定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。 在观察者模式中，有两类对象：被观察者（Subject）和观察者（Observer…...
Python深度学习进阶与前沿应用：注意力机制、Transformer模型、生成式模型、目标检测算法、图神经网络、强化学习等
近年来，伴随着以卷积神经网络（CNN）为代表的深度学习的快速发展，人工智能迈入了第三次发展浪潮，AI技术在各个领域中的应用越来越广泛。为了帮助广大学员更加深入地学习人工智能领域最近3-5年的新理论与新技术࿰…...
24.1 prometheus-exporter管理
本节重点介绍 : exporter 流派 必须和探测对象部署在一起的1对多的远端探针模式 exporter管控的难点 1对1 的exporter 需要依托诸如 ansible等节点管理工具 ，所以应该尽量的少 1对1的exporter改造成探针型的通用思路 exporter 流派 必须和探测对象部署在一起的…...
【Arduino IDE安装】Arduino IDE的简介和安装详情
目录 🌞1. Arduino IDE概述 🌞2. Arduino IDE安装详情 🌍2.1 获取安装包 🌍2.2 安装详情 🌍2.3 配置中文 🌍2.4 其他配置 🌞1. Arduino IDE概述 Arduino IDE（Integrated Deve…...
『网络游戏』自适应制作登录UI【01】
首先创建项目 修改场景名字为SceneLogin 创建一个Plane面板 - 将摄像机照射Plane 新建游戏启动场景GameRoot 新建空节点重命名为GameRoot 在子级下创建Canvas 拖拽EventSystem至子级 在Canvas子级下创建空节点重命名为LoginWnd - 即登录窗口 创建公告按钮 创建字体文本 创建输入…...
用Manim简单解释奇异值分解（SVD）和图像处理方面的应
一，介绍 奇异值分解（SVD）是一种重要的矩阵分解技术，在统计学、信号处理和机器学习等领域有广泛应用。对于任意给定的矩阵 A（可以是任意形状的矩阵），SVD将其分解为三个特定的矩阵的乘积&#x…...
红外变电站分割数据集，标注为json格式，总共有5类，避雷器（289张），绝缘子（919张），电流互感器（413张），套管（161张），电压互感器（153张）
红外变电站分割数据集，标注为json格式，总共有5类 避雷器（289张），绝缘子（919张），电流互感器（413张），套管（161张）࿰…...
HBase 性能优化 详解
HBase 是基于 Hadoop HDFS 之上的分布式 NoSQL 数据库，具有高伸缩性和强大的读写能力。然而，由于其分布式架构和复杂的数据存储模式，在高并发、大规模数据场景下，HBase 性能优化至关重要。从底层原理和源代码层面理解 HBase 的特性…...
杭电2041-2050
2041 这里进入递归专题了 #include<bits/stdc.h> #include<iostream> //简单递归 using namespace std; long long int M[45]; int main() {int n;M[1]1;M[2]1;for(int i3;i<45;i){M[i]M[i-1]M[i-2];}while(cin>>n){while(n--){int m;cin>>m;cout…...
Ambari搭建Hadoop集群 — — 问题总结
Ambari搭建Hadoop集群 — — 问题总结 一、部署教程： 参考链接：基于Ambari搭建大数据分析平台-CSDN博客 二、问题总结： 1. VMwear Workstation 查看网关 2. 资源分配 参考： 硬盘：master（29 GBÿ…...
如何用python抓取豆瓣电影TOP250
1.如何获取网站信息？ （1）调用requests库、bs4库 #检查库是否下载好的方法：打开终端界面（terminal）输入pip install bs4, 如果返回的信息里有Successfully installed bs4 说明安装成功（request…...
鸽笼原理与递归 - 离散数学系列（四）
目录 1. 鸽笼原理 鸽笼原理的定义 鸽笼原理的示例 鸽笼原理的应用 2. 递归的定义与应用 什么是递归？ 递归的示例 递归与迭代的对比 3. 实际应用 鸽笼原理的实际应用 递归的实际应用 4. 例题与练习 例题1：鸽笼原理应用 例题2：递归…...
Ubuntu 20.04常见配置（含yum源替换、桌面安装、防火墙设置、ntp配置）
Ubuntu 20.04常见配置 1. yum源配置2. 安装桌面及图形化2.1 安装图形化桌面2.1.1 选择安装gnome桌面2.1.2 选择安装xface桌面 2.2 安装VNC-Server 3. ufw防火墙策略4. 时区设置及NTP时间同步4.1 时区设置4.2 NTP安装及时间同步4.2.1 服务端（例：172.16.32…...
AI学习指南深度学习篇-生成对抗网络的基本原理
AI学习指南深度学习篇-生成对抗网络的基本原理 引言 生成对抗网络（Generative Adversarial Networks, GANs）是近年来深度学习领域的一个重要研究方向。GANs通过一种创新的对抗训练机制，能够生成高质量的样本，其应用范围广泛&…...
什么是网络安全
网络安全是指通过采取必要措施，防范对网络的攻击、侵入、干扰、破坏和非法使用以及意外事故，使网络处于稳定可靠运行的状态，以及保障网络数据的完整性、保密性、可用性的能力。 网络安全涉及多个层面，包括硬件、软件及其系统中数…...
Redis list 类型
list类型 类型介绍 列表类型 list 相当于 数组或者顺序表 list内部的编码方式更接近于 双端队列 ，支持头插 头删 尾插 尾删。 需要注意的是，Redis的下标支持负数下标。 比如数组大小为5，那么要访问下标为 -2 的值可以理解为访问 5 - 2 3 …...
Linux更改固定IP地址
1.VMware里更改虚拟网络 一: 二: 三:确定就好了 2.修改Linux系统的固定IP 一:进入此文件 效果如下: 执行以下命令: 此时IP已更改 3.远程连接 这个是前提!!! 更改网络编辑器后网络适配器可能会修改,我就是遇着这个,困住我了一会 一:可以以主机IP对应连接 连接成功 二:主机名连…...
Chapter03-Authentication vulnerabilities
文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...
使用rpicam-app通过网络流式传输视频)
树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频
使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源： http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...
基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？
Otsu 是一种自动阈值化方法，用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理，能够自动确定一个阈值，将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...
三体问题详解
从物理学角度，三体问题之所以不稳定，是因为三个天体在万有引力作用下相互作用，形成一个非线性耦合系统。我们可以从牛顿经典力学出发，列出具体的运动方程，并说明为何这个系统本质上是混沌的，无法得到一般解…...
C++ 求圆面积的程序（Program to find area of a circle）
给定半径r，求圆的面积。圆的面积应精确到小数点后5位。 例子： 输入：r 5 输出：78.53982 解释：由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982，因为我们只保留小数点后 5 位数字。 输…...
UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中，UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...
selenium学习实战【Python爬虫】
selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...
CSS设置元素的宽度根据其内容自动调整
width: fit-content 是 CSS 中的一个属性值，用于设置元素的宽度根据其内容自动调整，确保宽度刚好容纳内容而不会超出。 效果对比 默认情况（width: auto）： 块级元素（如 <div>）会占满父容器…...
4. TypeScript 类型推断与类型组合
一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式，自动确定它们的类型。 这一特性减少了显式类型注解的需要，在保持类型安全的同时简化了代码。通过分析上下文和初始值，TypeSc…...