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

CSS圆角

news 文章来源：https://blog.csdn.net/2401_82561004/article/details/142742512 2025/5/9 3:42:34

在制作网页的过程中，有时我们可能需要实现圆角的效果，以前的做法是通过切图（将设计稿切成便于制作成页面的图片），使用多个背景图像来实现圆角。在 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圆角

在制作网页的过程中&#xff0c;有时我们可能需要实现圆角的效果&#xff0c;以前的做法是通过切图&#xff08;将设计稿切成便于制作成页面的图片&#xff09;&#xff0c;使用多个背景图像来实现圆角。在 CSS3 出现之后就不需要这么麻烦了&#xff0c;CSS3 中提供了一系列属性…...

编程日记 2024/10/8 8:29:57

信息安全工程师（37）防火墙概述

前言 防火墙是一种网络安全系统&#xff0c;旨在监控和控制网络流量&#xff0c;根据预定义的安全规则决定是否允许数据包的传输。 一、定义与功能 定义&#xff1a;防火墙是网络安全的第一道防线&#xff0c;由硬件设备和软件系统共同构成&#xff0c;位于外网与内网之间、公共…...

编程日记 2024/10/8 8:27:54

多元化网络团队应对复杂威胁

GenAI、ML 和 IoT 等技术为威胁者提供了新的工具&#xff0c;使他们更容易针对消费者和组织发起攻击。 从诱骗受害者陷入投资骗局的Savvy Seahorse &#xff0c;到使用 ChatGPT 之类的程序感染计算机并阅读电子邮件的自我复制 AI 蠕虫&#xff0c;新的网络威胁几乎每天都在出现…...

编程日记 2024/10/8 8:19:46

Observer(观察者模式)

1. 意图 定义对象间的一种一对多的依赖关系&#xff0c;当一个对象的状态发生改变时&#xff0c;所有依赖于它的对象都得到通知并被自动更新。 在观察者模式中&#xff0c;有两类对象&#xff1a;被观察者&#xff08;Subject&#xff09;和观察者&#xff08;Observer&#xf…...

编程日记 2024/10/8 8:18:44

Python深度学习进阶与前沿应用：注意力机制、Transformer模型、生成式模型、目标检测算法、图神经网络、强化学习等

近年来&#xff0c;伴随着以卷积神经网络&#xff08;CNN&#xff09;为代表的深度学习的快速发展&#xff0c;人工智能迈入了第三次发展浪潮&#xff0c;AI技术在各个领域中的应用越来越广泛。为了帮助广大学员更加深入地学习人工智能领域最近3-5年的新理论与新技术&#xff0…...

编程日记 2024/10/8 8:17:43

24.1 prometheus-exporter管理

本节重点介绍 : exporter 流派 必须和探测对象部署在一起的1对多的远端探针模式 exporter管控的难点 1对1 的exporter 需要依托诸如 ansible等节点管理工具 &#xff0c;所以应该尽量的少 1对1的exporter改造成探针型的通用思路 exporter 流派 必须和探测对象部署在一起的…...

编程日记 2024/10/8 8:16:42

【Arduino IDE安装】Arduino IDE的简介和安装详情

目录 &#x1f31e;1. Arduino IDE概述 &#x1f31e;2. Arduino IDE安装详情 &#x1f30d;2.1 获取安装包 &#x1f30d;2.2 安装详情 &#x1f30d;2.3 配置中文 &#x1f30d;2.4 其他配置 &#x1f31e;1. Arduino IDE概述 Arduino IDE&#xff08;Integrated Deve…...

编程日记 2024/10/8 8:12:38

『网络游戏』自适应制作登录UI【01】

首先创建项目 修改场景名字为SceneLogin 创建一个Plane面板 - 将摄像机照射Plane 新建游戏启动场景GameRoot 新建空节点重命名为GameRoot 在子级下创建Canvas 拖拽EventSystem至子级 在Canvas子级下创建空节点重命名为LoginWnd - 即登录窗口 创建公告按钮 创建字体文本 创建输入…...

编程日记 2024/10/8 8:10:35

用Manim简单解释奇异值分解（SVD）和图像处理方面的应

一&#xff0c;介绍 奇异值分解&#xff08;SVD&#xff09;是一种重要的矩阵分解技术&#xff0c;在统计学、信号处理和机器学习等领域有广泛应用。对于任意给定的矩阵 A&#xff08;可以是任意形状的矩阵&#xff09;&#xff0c;SVD将其分解为三个特定的矩阵的乘积&#x…...

编程日记 2024/10/8 8:08:31

红外变电站分割数据集，标注为json格式，总共有5类，避雷器（289张），绝缘子（919张），电流互感器（413张），套管（161张），电压互感器（153张）

红外变电站分割数据集&#xff0c;标注为json格式&#xff0c;总共有5类 避雷器&#xff08;289张&#xff09;&#xff0c;绝缘子&#xff08;919张&#xff09;&#xff0c;电流互感器&#xff08;413张&#xff09;&#xff0c;套管&#xff08;161张&#xff09;&#xff0…...

编程日记 2024/10/8 8:06:28

HBase 性能优化 详解

HBase 是基于 Hadoop HDFS 之上的分布式 NoSQL 数据库&#xff0c;具有高伸缩性和强大的读写能力。然而&#xff0c;由于其分布式架构和复杂的数据存储模式&#xff0c;在高并发、大规模数据场景下&#xff0c;HBase 性能优化至关重要。从底层原理和源代码层面理解 HBase 的特性…...

编程日记 2024/10/8 8:03:24

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

编程日记 2024/10/8 8:01:22

Ambari搭建Hadoop集群 — — 问题总结

Ambari搭建Hadoop集群 — — 问题总结 一、部署教程&#xff1a; 参考链接&#xff1a;基于Ambari搭建大数据分析平台-CSDN博客 二、问题总结&#xff1a; 1. VMwear Workstation 查看网关 2. 资源分配 参考&#xff1a; 硬盘&#xff1a;master&#xff08;29 GB&#xff…...

编程日记 2024/10/8 7:54:16

如何用python抓取豆瓣电影TOP250

1.如何获取网站信息&#xff1f; &#xff08;1&#xff09;调用requests库、bs4库 #检查库是否下载好的方法&#xff1a;打开终端界面&#xff08;terminal&#xff09;输入pip install bs4, 如果返回的信息里有Successfully installed bs4 说明安装成功&#xff08;request…...

编程日记 2024/10/8 7:51:13

鸽笼原理与递归 - 离散数学系列（四）

目录 1. 鸽笼原理 鸽笼原理的定义 鸽笼原理的示例 鸽笼原理的应用 2. 递归的定义与应用 什么是递归&#xff1f; 递归的示例 递归与迭代的对比 3. 实际应用 鸽笼原理的实际应用 递归的实际应用 4. 例题与练习 例题1&#xff1a;鸽笼原理应用 例题2&#xff1a;递归…...

编程日记 2024/10/8 7:50:12

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 服务端&#xff08;例&#xff1a;172.16.32…...

编程日记 2024/10/8 7:49:11

AI学习指南深度学习篇-生成对抗网络的基本原理

AI学习指南深度学习篇-生成对抗网络的基本原理 引言 生成对抗网络&#xff08;Generative Adversarial Networks, GANs&#xff09;是近年来深度学习领域的一个重要研究方向。GANs通过一种创新的对抗训练机制&#xff0c;能够生成高质量的样本&#xff0c;其应用范围广泛&…...

编程日记 2024/10/8 7:45:07

什么是网络安全

网络安全是指通过采取必要措施&#xff0c;防范对网络的攻击、侵入、干扰、破坏和非法使用以及意外事故&#xff0c;使网络处于稳定可靠运行的状态&#xff0c;以及保障网络数据的完整性、保密性、可用性的能力。 网络安全涉及多个层面&#xff0c;包括硬件、软件及其系统中数…...

编程日记 2024/10/8 7:43:05

Redis list 类型

list类型 类型介绍 列表类型 list 相当于 数组或者顺序表 list内部的编码方式更接近于 双端队列 &#xff0c;支持头插 头删 尾插 尾删。 需要注意的是&#xff0c;Redis的下标支持负数下标。 比如数组大小为5&#xff0c;那么要访问下标为 -2 的值可以理解为访问 5 - 2 3 …...

编程日记 2024/10/8 7:41:03

Linux更改固定IP地址

1.VMware里更改虚拟网络 一: 二: 三:确定就好了 2.修改Linux系统的固定IP 一:进入此文件 效果如下: 执行以下命令: 此时IP已更改 3.远程连接 这个是前提!!! 更改网络编辑器后网络适配器可能会修改,我就是遇着这个,困住我了一会 一:可以以主机IP对应连接 连接成功 二:主机名连…...

编程日记 2024/10/8 7:32:54

Qt+大恒相机回调图片刷新使用方式

一、前言 上篇文章介绍了如何调用大恒SDK获得回调图片&#xff0c;这篇介绍如何使用这些图片并刷新到界面上。考虑到相机的帧率很高&#xff0c;比如200fps是很高的回调频率。那么我们的刷新频率是做不到这么快&#xff0c;也没必要这么快。一般刷新在60帧左右就够了。 二、思路…...

编程日记 2024/10/8 7:28:49

Docker 环境下 PostgreSQL 监控实战：从 Exporter 到 Prometheus 的部署详解

Docker 环境下 PostgreSQL 监控实战&#xff1a;从 Exporter 到 Prometheus 的部署详解 文章目录 Docker 环境下 PostgreSQL 监控实战&#xff1a;从 Exporter 到 Prometheus 的部署详解一 节点简述二 节点监控部署1&#xff09;创建 PostgreSQL 的 exporter 账号2&#xff09;…...

编程日记 2024/10/8 7:27:48

构建带有调试符号的srsRAN 4G

### 构建带有调试符号 首先确保已下载srsRAN 4G&#xff0c;并已创建并导航至构建文件夹&#xff1a; bash git clone https://github.com/srsran/srsran_4g.git cd srsRAN_4G mkdir build cd build 若srsRAN 4G已构建完成&#xff0c;应清除原有构建文件夹后继续。 可以使…...

编程日记 2024/10/8 7:21:41

算法题总结（十）——二叉树上

#二叉树的递归遍历 // 前序遍历递归LC144_二叉树的前序遍历 class Solution {public List<Integer> preorderTraversal(TreeNode root) {List<Integer> result new ArrayList<Integer>(); //也可以把result 作为全局变量&#xff0c;只需要一个函数即可。…...

编程日记 2024/10/8 7:16:35

【MySQL】MySQL 数据库主从复制详解

目录 1. 基本概念1.1 主从架构1.2 复制类型 2. 工作原理2.1 复制过程2.2 主要组件 3. 配置步骤3.1 准备工作3.2 在主服务器上配置3.3 在从服务器上配置 4. 监控和维护4.1 监控复制状态4.2 处理复制延迟4.3 故障恢复 5. 备份策略5.1 逻辑备份与物理备份5.2 增量备份 6. 使用场景…...

编程日记 2024/10/8 7:15:33

一种格式化printf hex 数据的方法

格式化输出HEX数据 调试过程中通常需要个格式化输出16进制数据&#xff0c;为了方便美观可以参考如下方法。 #define __is_print(ch) ((unsigned int)((ch) - ) < 127u - )/*** dump_hex* * brief hex打印* * param buf: 需要打印的原始数据* param size: 原始数据类型*…...

编程日记 2024/10/8 7:14:32

在LabVIEW中如何读取EXCEL

在LabVIEW中读取Excel文件通常使用“报告生成工具包”&#xff08;Report Generation Toolkit&#xff09;。以下是详细步骤&#xff1a; ​ 安装工具包&#xff1a;确保已安装“报告生成工具包”。这通常随LabVIEW一起提供&#xff0c;但需要单独安装。 创建VI&#xff1a; 打…...

编程日记 2024/10/8 7:13:31

布匹瑕疵检测数据集 4类 2800张 布料缺陷 带标注 voc yolo

布匹瑕疵检测数据集 4类 2800张 布料缺陷 带标注 voc yolo 对应标注&#xff0c;格式VOC (XML)&#xff0c;选配Y0L0(TXT) label| pic_ num| box_ _num hole: (425&#xff0c; 481) suspension_ wire: (1739&#xff0c; 1782) topbasi: (46&#xff0c; 46) dirty: (613&…...

编程日记 2024/10/8 7:12:30

灵动微高集成度电机MCU单片机

由于锂电技术的持续进步、消费者需求的演变、工具种类的革新以及应用领域的扩展&#xff0c;电动工具行业正呈现出无绳化、锂电化、大功率化、小型化、智能化和一机多能化的发展趋势。无绳化和锂电化的电动工具因其便携性和高效能的特性&#xff0c;已成为市场增长的重要驱动力…...

编程日记 2024/10/8 7:11:29

陪护小程序|护理陪护系统|陪护小程序成品

智能化&#xff0c;作为智慧医疗宏伟蓝图的基石&#xff0c;正引领着一场医疗服务的深刻变革。在这场变革的浪潮中&#xff0c;智慧医院小程序犹如璀璨新星&#xff0c;迅速崛起&#xff0c;而陪护小程序的诞生&#xff0c;更是如春风化雨&#xff0c;细腻地触及了老年病患、家…...

编程日记 2024/10/8 7:10:28