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对应连接 连接成功 二:主机名连…...
Python｜GIF 解析与构建（5）：手搓截屏和帧率控制
目录 Python｜GIF 解析与构建（5）：手搓截屏和帧率控制 一、引言 二、技术实现：手搓截屏模块 2.1 核心原理 2.2 代码解析：ScreenshotData类 2.2.1 截图函数：capture_screen 三、技术实现&…...
论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）
HoST框架核心实现方法详解 - 论文深度解读（第二部分） 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章： 论文深度解读 + 算法与代码分析（二） 作者机构： 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题： 人形机器人…...
基于FPGA的PID算法学习———实现PID比例控制算法
基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容：参考网站： PID算法控制 PID即：Proportional（比例）、Integral（积分&…...
uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖
在前面的练习中，每个页面需要使用ref，onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入，需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...
（二）TensorRT-LLM | 模型导出（v0.20.0rc3）
0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述，后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作，其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...
关于nvm与node.js
1 安装nvm 安装过程中手动修改 nvm的安装路径， 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解，但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后，通常在该文件中会出现以下配置&…...
2021-03-15 iview一些问题
1.iview 在使用tree组件时，发现没有set类的方法，只有get，那么要改变tree值，只能遍历treeData，递归修改treeData的checked，发现无法更改，原因在于check模式下，子元素的勾选状态跟父节…...
python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）
更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...
SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现
摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序，以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务，提供稳定高效的数据处理与业务逻辑支持；利用 uniapp 实现跨平台前…...
Python爬虫（一）：爬虫伪装
一、网站防爬机制概述 在当今互联网环境中，具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类： 身份验证机制：直接将未经授权的爬虫阻挡在外反爬技术体系：通过各种技术手段增加爬虫获取数据的难度…...