今天做了一个demo,其中要用到圆形,首先想到的就是给一个div设置宽等于高,再加上border-radius等于宽的一半就好了
div {
width: 200px;
height: 200px;
border-radius: 100px;
}
但是如果div的宽度是百分比,继承的是父元素的宽度的百分比时,高度该如何设置为等于宽呢?
div {
width: 20%;
height: 0; // 设置高为0,让padding撑起高
padding-bottom: 20%; /* 让div的高等于宽 */
border-radius: 50%;
}
此时将padding-top/padding-bottom设置为百分比时,是基于父元素宽度,正好和width相等;在使用border-radius=50%,就实现了自适应的圆形。