非零基础自学前端最后一遍一 HTML+CSS 14 额外知识补充 14.1 border实现图形和旋转

小灰灰 2024-03-22 15:27 60阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  14 额外知识补充
         *   *  14.1 border实现图形和旋转
             *   *  14.1.1 边框的形状

![在这里插入图片描述][eef4eb4ee18d457eb08567d1c8afc10a.png_pic_center]

#### 一 HTML+CSS ####

#### 14 额外知识补充 ####

##### 14.1 border实现图形和旋转 #####

###### 14.1.1 边框的形状 ######

border主要是用来给盒子增加边框的, 但是在开发中我们也可以利用边框的特性来实现一些形状:

![在这里插入图片描述][20d9fea2aa804cfab67d0998134926fe.png_pic_center]

*  假如我们将border宽度设置成50会是什么效果呢?
    
     *  如果我们进一步, 将另外三边的颜色去除呢?
     *  如果我们将这个盒子旋转呢?
 *  所以利用border或者CSS的特性我们可以做出很多图形:
    
     *  https://css-tricks.com/the-shapes-of-css/\#top-of-site
        
        ![在这里插入图片描述][c44d80257ba241d687456c621d3ffc3e.png_pic_center]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .box {
         
          width: 100px;
          height: 100px;
          /* background-color: transparent; */
    
          border: 50px solid transparent;
          /* border-right-color: blue;
          border-bottom-color: aqua;
          border-left-color: blueviolet; */
    
          /* border-right-color: transparent;
          border-bottom-color: transparent;
          border-left-color: transparent; */
          border-top-color: orange;
    
          box-sizing: border-box;
    
          /* 旋转 */
          transform-origin: center 25%;
          transform: rotate(180deg);
        }
      </style>
    </head>
    
    <body>
    
      <div class="box"></div>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][6551fc2bdcf34827b463181848be38f2.png_pic_center]

[eef4eb4ee18d457eb08567d1c8afc10a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/e3df53ba2dfc45bb82c075f4af8038fd.png
[20d9fea2aa804cfab67d0998134926fe.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/ba937448849a4cf9815986366b27bbe6.png
[c44d80257ba241d687456c621d3ffc3e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/233ab18e199f42239e703f547b5dfc2f.png
[6551fc2bdcf34827b463181848be38f2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/127a994f08794962bde7186e4a68cd5f.png