C3-border是个神奇的东西，简单图形_c3 border单独出来-CSDN博客

本文链接：https://blog.csdn.net/qq_42937400/article/details/120184689

这篇博客展示了如何使用CSS创建一系列独特的形状和边框效果。通过透明边框和颜色渐变，作者创造出了从不同角度透视的蓝色和绿色图形，包括直角和圆角矩形，以及圆形和半圆形。这些技巧可以用于前端开发中的界面元素装饰，增加视觉吸引力。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .first,.second,.third{
            height: 300px;
        }
        .box1{
           width: 100px;
           height: 100px;
           border: 100px solid transparent;
           border-right-color: blue; 
           border-top-color: blue;
           box-sizing: border-box;
           float: left;
           margin-right: 50px;
        }
        .box2{
           width: 100px;
           height: 100px;
           border: 100px solid transparent;
           border-left-color: rgba(0, 0, 255, 0.459); 
           border-top-color: rgba(0, 0, 255, 0.459);
           box-sizing: border-box;
           float: left;
           margin-right: 50px;
        }
        .box3 {
           width: 100px;
           height: 100px;
           border: 100px solid transparent;
           border-left-color: rgba(0, 0, 255, 0.726); 
           border-bottom-color: rgba(0, 0, 255, 0.726);
           box-sizing: border-box;
           float: left;
           margin-right: 50px;
        }
        .box4 {
           width: 100px;
           height: 100px;
           border: 100px solid transparent;
           border-right-color: rgba(0, 0, 255, 0.444); 
           border-bottom-color: rgba(0, 0, 255, 0.444);
           box-sizing: border-box;
           float: left;
           margin-right: 50px;
        }
        .box5 {
           width: 100px;
           height: 100px;
           border: 100px solid transparent;
           border-top-color: rgba(49, 175, 76, 0.444); 
           box-sizing: border-box;
           float: left;
           margin-right: 50px;
        }
        .box6 {
           width: 100px;
           height: 100px;
           border: 100px solid transparent;
           border-left-color: rgba(49, 175, 76, 0.999); 
           box-sizing: border-box;
           float: left;
           margin-right: 50px;
        }
        .box7 {
           width: 100px;
           height: 100px;
           border: 100px solid transparent;
           border-bottom-color: rgba(28, 82, 39, 0.911); 
           box-sizing: border-box;
           float: left;
           margin-right: 50px;
        }
        .box8 {
           width: 100px;
           height: 100px;
           border: 100px solid transparent;
           border-right-color: rgba(49, 175, 76, 0.444); 
           box-sizing: border-box;
           float: left;
           margin-right: 50px;
        }
        .box9 {
           width: 100px;
           height: 100px;
           border: 100px solid transparent;
           border-top-color: rgba(49, 175, 76, 0.444); 
           float: left;
           margin-right: 50px;
        }
        .box10 {
           width: 100px;
           height: 100px;
           border: 100px solid transparent;
           border-bottom-color: rgba(0, 0, 255, 0.444);
           float: left;
           margin-right: 50px;
        }
        .box11 {
           width: 100px;
           height: 100px;
           border: 100px solid transparent;
           border-top-color: rgba(49, 175, 76, 0.444); 
           border-radius: 50%;
           box-sizing: border-box;
           float: left;
           margin-right: 50px;
        }
        .box12 {
           width: 100px;
           height: 100px;
           border: 100px solid transparent;
           border-right-color: rgba(49, 175, 76, 0.444); 
           border-radius: 50%;
           box-sizing: border-box;
           float: left;
           margin-right: 50px;
        }
    </style>
</head>
<body>
    <div class="first" >
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>
    <div class="second">
        <div class="box5"></div>
        <div class="box6"></div>
        <div class="box7"></div>
        <div class="box8"></div>
    </div>
    <div class="third">
        <div class="box9"></div>
        <div class="box10"></div>
        <div class="box11"></div>
        <div class="box12"></div>
    </div>
  
</body>
</html>