利用盒模型实现一些有意思的图案_利用盒模型编写新闻列表-CSDN博客

本文链接：https://blog.csdn.net/dacbe/article/details/90575613

上周闲来无事，研究了一下盒模型，乱捣鼓还真弄出了一些有意思的东西，下面跟大家分析一下，也希望能提升一下大家对于盒模型的理解。

1、

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <style type="text/css">
    * {
      margin: 0;
    }
    .box {
      width: 150px;
      height: 150px;
      background-color: black;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      border-width: 0 100px 100px 100px;
      border-style: solid;
      border-color: black grey;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

2、

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <style type="text/css">
    * {
      margin: 0;
    }
    .box {
      width: 150px;
      height: 150px;
      background-color: blue;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      border-width: 100px 0;
      border-style: solid;
      border-color: black transparent;
      border-radius: 50%;
      transform: rotate(45deg);
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

3、

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <style type="text/css">
    * {
      margin: 0;
    }
    .box {
      width: 0;
      height: 0;
      margin: auto;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      border-width: 100px;
      border-style: solid;
      border-color: black transparent;
      border-radius: 50%;
      transform: rotate(45deg);
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

看完了上面的图案，是不是对盒模型的理解又深了一些呢。