border radius四个值顺序（按顺序排列border-radius的四个值是）

本文目录

• 按顺序排列border-radius的四个值是
• 深入border-radius
• 在HTML中如何把块的边框做成圆角
• 请问以下CSS3 效果：两边是圆角，中间是一条分界线 这种效果怎么实现
• 详解border-radius属性
• CSS3中 border-radius: 0.4em 0.4em 2em 2em / .4em .4em 3em 3em;什么意思
• 在HTML里如何实现圆角矩形
• border-radius用法
• 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 其实是四个角的缩写，分别是 border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius；而这四个圆角，控制其形状的又分为水平和垂直两个值；所以平时我们写border-radius: 50%; 实际上是 

border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; 

分别代表：左上水平圆角半径 右上.. 右下.. 左下.. / 左上垂直圆角半径 右上垂直圆角半径 右下.. 左下..

（1） 一个圆角，宽高相同
上面这两张截图例子很简单，就是当控制一个圆角时，会根据它设置的圆角半径大小来画圆，半径越大，画的圆就越大，你瞅瞅图1.1半径小，实际上会形成的圆就是小的，到图1.2，半径变大了，就得到了一个四分之一的圆，就可以看到如果实际形成圆，这个圆就会明显比图1.1大。

【 重点小tip 】而如图1.3所示：当圆角半径超设置的宽高时，最大的水平 和 垂直圆角半径还是分别等于 宽度 和 高度的大小，不会再变大了。

（2）一个圆角，宽高不同

其实图2.1~图2.3规律跟上面图1.1~图1.3一个圆角，宽高相同的规律一致。那么此时图2.4就不一样， 重点来了！

图2.4中，当水平圆角半径设置为宽度的2倍，而垂直圆角半径跟高度一致时，出现的效果是水平圆角半径与宽度一致（这个就是上面图1.3时说的不会超过实际的宽度，超过时就会等于宽度），这是合理；但是此时垂直圆角半径居然变成了高度的1/2。

在图2.4例子中，width:height==1:2，而左上角圆角的水平圆角半径:垂直圆角半径=1:1；那么此时可以看出水平圆角半径和width是1:1，而垂直圆角半径跟height是1:2，从例子来看，垂直半径就是height的一半了。此时就出现了今日第二小tips：

【 重点小tip 】等比例特征，根据width和height比例，来推断border-radius的水平和垂直比例，因为实际width:height是1：2，而水平半径：垂直半径=1：1，所以垂直半径就只能跟水平一样都是width，如果此时想要实现垂直半径等于高度，那么就需要等比例，即水平半径：垂直半径=width:height = 1:2，即

border-top-left-radius: 200px 400px;  或

border-top-left-radius: 100px 200px; 相当于 border-top-left-radius: 100% 100%;（这比例是根据width和height乘于对应的比例）

（1）两个圆角，宽高相同

上图的例子说明一个问题：两个角是会互相影响的，第二个例子中，左上角圆角和左下角圆角分别都是200px;(height是200px)，但是最后是按照它们的比例：1:1来分别分100px给它们；而此时因为垂直和水平半径比例是1：1，此时垂直半径是100px；水平半径跟着也缩减为100px；

同理，第三个例子中左上角和左下角的比例是1：2，那么从例子看它们的圆角半径（包括水平和垂直半径）也跟着成比例。

那么这一小节又可以总结一个小tip啦~

【 重要小tip 】圆角之间会互相影响，根据它们在垂直还是水平分别按照比例得到是height还是width的百分比来画圆角。而相应的，其他的就会根据上面的两个小tips再继续形成最终的圆角~

那么现在根据上面的知识应该能画出我们文章最初提出来的问题，如何画个半圆。控制wdith:height=1:2;而border-radius中水平半径是width;垂直半径是width;就能画出一个半圆了；即水平和垂直半径的比例是1:1;

总结：

1. 设置border-radius时，半径不会超过实际元素设置的width和height

2. 水平和垂直半径是按比例的

3. 圆角是会互相影响的，也是按比例来占有半径

在HTML中如何把块的边框做成圆角

在HTML中把块的边框做成圆角需要利用css的border-radius属性。

1、定义和用法

border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。

提示：该属性允许您为元素添加圆角边框！

默认值：

0    

继承性：

no    

版本：

CSS3    

JavaScript 语法：

object.style.borderRadius="5px" ；

2、语法

border-radius: 1-4 length|% / 1-4 length|%;

注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。

div#DemoArea
{
border-radius:50px;
}

3、结果：

请问以下CSS3 效果：两边是圆角，中间是一条分界线 这种效果怎么实现

这是两个按钮或者div，左边的设置左边框圆角，右边的那个设置右边框圆角。具体的参数，你可以参考一下这个教程：
border-radius:2em;
等价于：
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
你也可以根据你的需要设置自己需要的边框。比如只设置左上角圆角。自己尝试一下吧。
***隐藏网址***

详解border-radius属性

其实通过一张示意图来理解的话就很容易了，那么我先来画一张示意图。

by三人行慕课

我们可以理解成是在角的位置放了一个圆形，而我们设置的参数就是圆形的半径，/前和/后分别是水品半径和垂直半径（横向的半径和纵向的半径）。

设置参数的顺序分别是左上、右上、右下、左下，在这里简称为1、2、3、4

我们设置这样的参数 50px 50px 50px 50px/25px 25px 25px 25px;（相当于50px/25px）

也就是1 2 3 4的水平半径都是50像素，垂直半径都是25像素，就会得到这样的图形：

by三人行慕课

我们来分析一下就是

by三人行慕课

这样看起来就显而易见，横向半径是50px，纵向半径是25px。

CSS3中 border-radius: 0.4em 0.4em 2em 2em / .4em .4em 3em 3em;什么意思

斜线前的是水平半径，斜线后的是垂直半径，水平半径跟垂直半径成90°不变。
一个角对应的两个值相等时，为一个1/4圆。不等时，对应增减。

在HTML里如何实现圆角矩形

HTML没有实现矩形的标签，可以借助CSS来完成。使用CSS3的border-radius属性，即可完成圆角矩形。
border-radius属性的具体用法如下：
border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。
默认值：0
继承性：no
版本：CSS3
JavaScript 语法：object.style.borderRadius="5px"
语法
border-radius: 1-4 length|% / 1-4 length|%;
（注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。）
值 描述 测试
length 定义圆角的形状。 测试
% 以百分比定义圆角的形状。 测试
例子 1
border-radius:2em;
等价于：
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
例子 2
border-radius: 2em 1em 4em / 0.5em 3em;
等价于：
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;

border-radius用法

border-radius用法如下：

1、写出border-radius的多值使用方法。最简单也是最常用的，就是一个值的情况，直接对边框的四个角进行设置。

2、border-radius：20px 20px；border-radius后面接两个值的时候，分别表示上左下右、上右下左。

3、border-radius：20px 20px 20px；border-radius后面接三个值是比较少见的。分别表示上左、上右下左、下右。

4、border-radius：0 0 0 20px；border-radius后面接四个值的时候，分别表示上左、上右、下左、下右。还有另外一种写法：border-top-left-radius:20px；这种表示上左。可以通过这种指定位置的方法，来设置边框的圆角值。

以上就是border-radius的用法。

html 怎样把文本框设置成圆角的

border-radius属性可以实现元素的圆角。如下css可以实现文本框（单行、多行）的圆角：
input,textarea{border-radius:3px;border:1px solid #000;}
border-radius用法如下：
border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。
该属性允许为元素添加圆角边框
语法：
border-radius: 1-4 length|% / 1-4 length|%;
按此顺序设置每个 radius 的四个值。
如果省略 bottom-left，则与 top-right 相同。
如果省略 bottom-right，则与 top-left 相同。
如果省略 top-right，则与 top-left 相同。
单位一般用px和百分比较多，其他单位也可

border-radius属性

这个borde-radius属性其实也是一个简写值,它分别是 border-top-left-radius(左上圆角半径), border-top-right-radius(右上圆角半径)