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

CSS圆角

news 2025/12/26 20:06:19

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

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

编程新知 2025/12/26 6:10:22

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

编程新知 2025/12/14 17:38:17

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

编程新知 2025/12/21 16:13:46

HBuilderX安装（uni-app和小程序开发）

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

编程新知 2025/12/15 13:32:19

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

编程新知 2025/9/20 12:14:18

xmind转换为markdown

文章目录 解锁思维导图新姿势&#xff1a;将XMind转为结构化Markdown 一、认识Xmind结构二、核心转换流程详解1.解压XMind文件&#xff08;ZIP处理&#xff09;2.解析JSON数据结构3&#xff1a;递归转换树形结构4&#xff1a;Markdown层级生成逻辑 三、完整代码 解锁思维导图新…...

编程新知 2025/12/15 17:19:38

《信号与系统》第 6 章 信号与系统的时域和频域特性

目录 6.0 引言 6.1 傅里叶变换的模和相位表示 6.2 线性时不变系统频率响应的模和相位表示 6.2.1 线性与非线性相位 6.2.2 群时延 6.2.3 对数模和相位图 6.3 理想频率选择性滤波器的时域特性 6.4 非理想滤波器的时域和频域特性讨论 6.5 一阶与二阶连续时间系统 6.5.1 …...

编程新知 2025/12/25 3:02:57

JDK 17 序列化是怎么回事

如何序列化&#xff1f;其实很简单&#xff0c;就是根据每个类型&#xff0c;用工厂类调用。逐个完成。 没什么漂亮的代码&#xff0c;只有有效、稳定的代码。 代码中调用toJson toJson 代码 mapper.writeValueAsString ObjectMapper DefaultSerializerProvider 一堆实…...

编程新知 2025/12/25 6:52:02

命令行关闭Windows防火墙

命令行关闭Windows防火墙 引言一、防火墙：被低估的"智能安检员"二、优先尝试！90%问题无需关闭防火墙方案1：程序白名单（解决软件误拦截）方案2：开放特定端口（解决网游/开发端口不通）三、命令行极速关闭方案方法一：PowerShell（推荐Win10/11）​方法二：CMD命令…...

编程新知 2025/8/27 20:07:03

Java并发编程实战 Day 11：并发设计模式

【Java并发编程实战 Day 11】并发设计模式 开篇 这是"Java并发编程实战"系列的第11天&#xff0c;今天我们聚焦于并发设计模式。并发设计模式是解决多线程环境下常见问题的经典解决方案&#xff0c;它们不仅提供了优雅的设计思路&#xff0c;还能显著提升系统的性能…...

编程新知 2025/12/10 19:17:05