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对应连接 连接成功 二:主机名连…...
SpringBoot-17-MyBatis动态SQL标签之常用标签
文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...
web vue 项目 Docker化部署
Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段： 构建阶段（Build Stage）：…...
AtCoder 第409场初级竞赛 A~E题解
A Conflict 【题目链接】 原题链接：A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串，只有在同时为 o 时输出 Yes 并结束程序，否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...
定时器任务——若依源码分析
分析util包下面的工具类schedule utils： ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类，封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz，先构建任务的 JobD…...
376. Wiggle Subsequence
376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...
linux arm系统烧录
1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 （忘了有没有这步了 估计有） 刷机程序 和 镜像 就不提供了。要刷的时…...
vue3 字体颜色设置的多种方式
在Vue 3中设置字体颜色可以通过多种方式实现，这取决于你是想在组件内部直接设置，还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法： 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...
Unit 1 深度强化学习简介
Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库，例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体，比如 SnowballFight、Huggy the Do…...
css3笔记 （1） 自用
outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size：0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格ÿ…...
Mobile ALOHA全身模仿学习
一、题目 Mobile ALOHA：通过低成本全身远程操作学习双手移动操作 传统模仿学习（Imitation Learning）缺点：聚焦与桌面操作，缺乏通用任务所需的移动性和灵活性 本论文优点：（1）在ALOHA…...