首页 > 其他分享> 文章详细

CSS – border-radius (Rounded Corners)

2022-02-24 22:03:20 阅读：278 来源： 互联网

标签：Rounded top radius 20px border 30px left

前言

之前的文章 CSS – W3Schools 学习笔记 (3), 这篇独立出来写, 作为整理.

参考:

Youtube – Advanced CSS Border-Radius Tutorial

正文

以长方形作为例子比较容易理解.

normal use

border-top-left-radius: 40px 30px;

设定 top-left (左上角)变圆角. horizontal 40px, vertical 30px. 效果:

one side over

如果其中一边写 over 会怎么样?

border-top-left-radius: 1000px 50px;

怪怪的形状

both side over

如果 2 变一样 over 呢?

border-top-left-radius: 1000px 1000px;

好像挺聪明的, 尽然用了其中 1 边的极限然后 apply 到了另一边.

use percentage

border-top-left-radius: 50% 50%;

shorthand 写法

border-top-left-radius: 50%; /* 等价于 50% 50% */

border-radius 多个一起的写法

border-radius: 10px 20px 30px 40px;
/* 等价于 */
border-top-left-radius: 10px 10px;
border-top-right-radius: 20px 20px;
border-bottom-right-radius: 30px 30px;
border-bottom-left-radius: 40px 40px;

再一个例子

border-radius: 10px 30px;
/* 等价于 */
border-radius: 10px 30px 10px 30px;

再一个例子

border-radius: 20px / 30px;
/* 等价于 */
border-top-left-radius: 20px 30px;
border-top-right-radius: 20px 30px;
border-bottom-right-radius: 20px 30px;
border-bottom-left-radius: 20px 30px;

在一个例子.

border-radius: 20px 30px 40px 50px / 30px 40px 50px 60px;
/* 等价于 */
border-top-left-radius: 20px 30px;
border-top-right-radius: 30px 40px;
border-bottom-right-radius: 40px 50px;
border-bottom-left-radius: 50px 60px;

Online tool for create radius

地址: https://9elements.github.io/fancy-border-radius/full-control.html#33.39.12.33-70.74.84.73-.

标签：Rounded,top,radius,20px,border,30px,left
来源： https://www.cnblogs.com/keatkeat/p/15933759.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9