你了解border-radius吗？

时间：2017-09-24 18:19:33 阅读：155 评论：0 收藏：0 [点我收藏+]

标签：rect items center and play ips otto div ota

1、圆角正方形

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

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;
}