你了解border-radius吗？

1、圆角正方形

.rounded-square{
  width: 200px;
  height: 200px;
  background-color: pink;
  border-radius: 50px;
}

当border-radius的值为一个时，它的最大有效值为“盒子最短边的二分之一”。

2、正圆

.circle{
  width: 200px;
  height: 200px;
  background-color: pink;
  border-radius: 100px;
}

3、圆角矩形

.rounded-rectangle{
  width: 200px;
  height: 100px;
  background-color: pink;
  border-radius: 50px;
}

4、不规则圆角

.not-regular-round{
    width: 200px;
    height: 200px;
    background-color: pink;
    border-top-left-radius: 100px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 25px;
}

简写

.not-regular-round{
  width: 200px;
  height: 200px;
  background-color: pink;
  border-radius: 100px 50px 10px 25px;
}

5、半圆

.half-circle{
  width: 200px;
  height: 100px;
  background-color: pink;
  border-radius: 200px 200px 0 0;
}

6、四分之一圆

.quarter-circle{
  width: 200px;
  height: 200px;
  background-color: pink;
  border-radius: 200px 0 0 0;
}

7、不是圆角矩形，也不是矩形，也不是椭圆

.strange-rectangle{
  width: 200px;
  height: 100px;
  background-color: pink;
  border-radius: 70px / 30px;
}

8、椭圆

.ellipse{
  width: 200px;
  height: 100px;
  background-color: pink;
  border-radius: 100px / 50px;
}

9、一半椭圆

.half-ellipse{
  width: 200px;
  height: 100px;
  background-color: pink;
  border-radius: 200px 0 0 200px / 50px 0 0 50px;
}

10、四分之一椭圆

.quarter-ellipse{
  width: 200px;
  height: 100px;
  background-color: pink;
  border-radius: 200px 0 0 0 / 100px 0 0 0;
}

11、一只站着的鸡蛋

.stand-egg{
  width: 100px;
  height: 200px;
  background-color: pink;
  border-radius: 50px 50px 50px 50px / 150px 150px 50px 50px;
}

12、一片叶子

.a-leaf{
  width: 200px;
  height: 200px;
  background-color: pink;
  border-radius: 200px 0 200px 0;
}

13、一片站着的歪叶子

.a-stand-strange-leaf{
  width: 100px;
  height: 200px;
  background-color: pink;
  border-radius: 200px 0 200px 0;
}

14、一片躺着的歪叶子

.a-sleep-strange-leaf{
  width: 200px;
  height: 100px;
  background-color: pink;
  border-radius: 200px 0 200px 0;
}

15、爱因为在心中

<div class="love-shape-box">
  <div class="left-love-shape"></div>
  <div class="right-love-shape"></div>
</div>
.love-shape-box{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}
.left-love-shape{
  width: 100px;
  height: 170px;
  background-color: red;
  border-radius: 50px 50px 0px 0;
  transform-origin: 50px 50px;
  transform: rotate(-45deg);
}
.right-love-shape{
  width: 100px;
  height: 170px;
  background-color: red;
  border-radius: 50px 50px 0px 0;
  transform-origin: 50px 50px;
  transform: rotate(45deg);
}

16、环带

把上面的形状的背景换成边框border: 50px solid pink;即可得到圆环。。。

巴特西

你了解border-radius吗？

最新文章

热门文章