前言

在 CSS 中 border-radius 这个属性想必你肯定是不陌生的，通过这个属性你可以设置元素的外边框圆角，从而实现你想要的各种（椭）圆，一个半径确定一个圆形，两个半径时确定一个椭圆，而我们平时所需要达到各种圆角效果，就是通过(椭)圆与边框的交集形成的圆角效果。

border-radius

• 我们先来看一张图

• 如图，这个矩形有四个不同圆角，每个圆角都由不同的尺寸构成，那每个圆角的构成，都是通过不同的水平和垂直的半径生成的。

• 然后我们看一下生成这个圆形的代码。

• border-radius：可以理解为由两组属性构成，第一组是水平上的尺寸，第二组则是垂直方向上的尺寸，通过下划线（/）隔开。而方向依次对应这左上右上右下左下。

• 但是在我们的平常开发中，他的属性都是简写的形式。

border-radius: 1em;
/* 等价于： */
border-top-left-radius:     1em;border-top-right-radius:    1em;border-bottom-right-radius: 1em;border-bottom-left-radius:  1em;

border-radius: 1em/5em;
/* 等价于： */
border-top-left-radius:     1em 5em;border-top-right-radius:    1em 5em;border-bottom-right-radius: 1em 5em;border-bottom-left-radius:  1em 5em;

好，今天就到这里了，今天努力的你依然是最棒的。Bye Bye！！！