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

CSS圆角

news 2026/3/27 15:20:15

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

OpCore Simplify：零基础黑苹果配置的终极自动化解决方案

OpCore Simplify&#xff1a;零基础黑苹果配置的终极自动化解决方案 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 还在为复杂的OpenCore EFI配置而烦…...

编程新知 2026/3/27 14:36:33

如何通过离线语音输入提升Android设备的文字录入效率

如何通过离线语音输入提升Android设备的文字录入效率 【免费下载链接】Sayboard An open-source on-device voice IME (keyboard) for Android using the Vosk library. 项目地址: https://gitcode.com/gh_mirrors/sa/Sayboard 在智能手机普及的今天&#xff0c;文字输…...

编程新知 2026/3/27 14:11:37

开发者专属OpenClaw配置：nanobot镜像对接VSCode插件开发

开发者专属OpenClaw配置&#xff1a;nanobot镜像对接VSCode插件开发 1. 为什么选择nanobot镜像进行VSCode插件开发 去年我在开发一个智能代码补全插件时&#xff0c;发现市面上大多数AI辅助工具都存在响应延迟高、隐私性差的问题。直到接触到OpenClaw生态下的nanobot镜像&…...

编程新知 2026/3/27 12:22:29

UniApp实战：如何安全高效地在安卓10+设备上实现本地数据存储（附权限配置避坑指南）

UniApp安卓10本地数据存储实战&#xff1a;权限配置与高性能方案设计 当你的UniApp在安卓10设备上突然无法保存用户配置时&#xff0c;控制台那行冰冷的"Permission denied"可能让整个开发团队陷入深夜加班。这不是简单的API调用问题&#xff0c;而是安卓存储机制变革…...

编程新知 2026/3/27 11:25:58

【八股必备】多线程面试题2

第一部分&#xff1a;线程基础与概念篇1. 线程模型面试官&#xff1a;先来个基础题&#xff0c;Java程序里的线程和操作系统线程是什么关系&#xff1f;是一回事吗&#xff1f;候选人&#xff1a;好的。在绝大多数情况下&#xff0c;比如我们常用的Windows、Linux系统&#xff…...

编程新知 2026/3/27 9:10:49

NaViL-9B实战手册：健康检查API与服务异常定位全流程

NaViL-9B实战手册&#xff1a;健康检查API与服务异常定位全流程 1. 平台概览 NaViL-9B是由专业AI研究机构开发的原生多模态大语言模型&#xff0c;能够同时处理纯文本问答和图片理解任务。该模型特别针对中文场景优化&#xff0c;支持中英文混合输入&#xff0c;为开发者提供…...

编程新知 2026/3/27 8:04:27

SecGPT-14B案例分享：某能源企业OT网络异常通信行为识别过程

SecGPT-14B案例分享&#xff1a;某能源企业OT网络异常通信行为识别过程 1. 引言&#xff1a;当能源网络遭遇“隐形”威胁 想象一下&#xff0c;一家大型能源企业的工业控制系统&#xff08;OT网络&#xff09;正在平稳运行&#xff0c;控制着发电、输电的关键设备。突然&…...

编程新知 2026/3/27 7:56:17

零基础玩转CTFShow Web1-7：手把手教你用Burp Suite和蚁剑拿flag

零基础玩转CTFShow Web1-7&#xff1a;从工具配置到实战渗透全指南 第一次接触CTF比赛时&#xff0c;看着其他选手在终端里敲出神秘代码就能拿到flag&#xff0c;总觉得这是黑客才能掌握的"黑魔法"。直到自己动手尝试才发现&#xff0c;只要掌握正确的工具和方法&…...

编程新知 2026/3/27 6:43:18

Blazor组件测试工具：BootstrapBlazor测试库完整指南

Blazor组件测试工具&#xff1a;BootstrapBlazor测试库完整指南 【免费下载链接】BootstrapBlazor 项目地址: https://gitcode.com/gh_mirrors/bo/BootstrapBlazor BootstrapBlazor测试库是企业级Blazor UI组件库的质量保障体系&#xff0c;提供了一套完整的组件测试解…...

编程新知 2026/3/27 5:38:55

RustFS实战：5分钟在Linux服务器上搭个私有S3兼容存储（保姆级配置+避坑指南）

RustFS实战&#xff1a;5分钟在Linux服务器上搭个私有S3兼容存储&#xff08;保姆级配置避坑指南&#xff09; 最近在折腾一个需要私有文件存储的Side Project&#xff0c;既不想用公有云S3&#xff08;太贵&#xff09;&#xff0c;又嫌MinIO配置繁琐。偶然发现RustFS这个基于…...

编程新知 2026/3/27 5:22:45