如何使用纯CSS3绘制26个英文字母的示例详解

                                                                纯CSS3绘制26个英文字母

     在这里你看到的26个标准的英文字母并不是普通的字体，它们是用CSS在空白的页面上绘制出来的，纯css作品。主要运用了CSS3里的多个新变换功能，需要使用最新的浏览器进行观赏。

       网页代码中用到（ 

）和p边距设置和浮动（margin:20px 5px 10px 80px; float: left;）。其中边距Margin四个像素依次代表：上右下左。

       以下按字母表顺序，列出绘制26个字母的CSS。

      

   .A{
      position:relative;
      margin:10px 30px 10px 5px;  /*上右下左 */
      float: left;
      left:30px;
      width:60px;
      height:91px;
      border-bottom:solid 14px #0feee2;
    }
    .A:before{
      transform:skew(-19deg,0);
      position:absolute;
      content:'';
      top:12.5px;
      left:0;
      width:16px;
      height:125px;
      background-color:#0feee2;
    }
    .A:after{
      transform:skew(19deg,0);
      position:absolute;
      content:'';
      top:12.5px;
      left:45px;
      width:16px;
      height:125px;
      background-color:#0feee2;
    }

  .B{
      position:relative;
      margin:10px 20px 10px 30px;
      float: left;
      top:12.5px;
      left:10px;
      width:60px;
      height:125px;
      border-left:solid 16px #2056cd;
    }
    .B:before{
      position:absolute;
      content:'';
      width:52px;
      height:39px;
      border-width:15px 15px 10px 0;
      border-color:#2056cd;
      border-style:solid;
      border-radius:0 240%180%0 /0 180%180%0;
   }
   .B:after{
      position:absolute;
      content:'';
      bottom:0;
      width:58px;
      height:43px;
      border-width:10px 15px 15px 0;
      border-color:#2056cd;
      border-style:solid;
      border-radius:0 180%220%0 /0 180%180%0;
     }

   .C{
       position:relative;
       margin:10px 5px 10px 10px;
       float: left;
       top:12.5px;
       left:10px;
       width:84px;
       height:95px;
       border-width:15px 12px 15px 16px;
       border-color:#87adef;
       border-style:solid;
       border-radius:50%;
     }
     .C:before{
       transform:rotate(45deg);
       position:absolute;
       content:'';
       top:2px;
       left:49px;
       width:90px;
       height:90px;
       background-color:#ffffff;
     }

  .D{
       position:relative;
       margin:10px 20px 10px 5px;
       float: left;
       top:12.5px;
       left:10px;
       border-left:solid 15px #ade081;
       height:125px;
     }
     .D:before{
       position:absolute;
       content:'';
       top:0;
       left:0;
       width:60px;
       height:95px;
       border-width:15px 15px 15px 0;
       border-color:#ade081;
       border-style:solid;
       border-radius:0 300%300%0 /0 180%180%0;
      }

   .E{
        position:relative;
        margin:10px 10px 10px 60px;
        float: left;
        top:12.5px;
        left:10px;
        width:63px;
        height:95px;
        border-width:15px 0 15px 16px;
        border-color:#cd2388;
        border-style:solid;
      }
      .E:before{
        position:absolute;
        content:'';
        top:38px;
        left:0px;
        width:53px;
        height:15px;
        background-color:#cd2388;
      }

   .F{
        position:relative;
        margin:10px 5px 10px 10px;
        float: left;
        top:12.5px;
        left:10px;
        width:63px;
        height:110px;
        border-width:15px 0 0 16px;
        border-color:#668899;
        border-style:solid;
       }
      .F:before{
        position:absolute;
        content:'';
        top:38px;
        left:0px;
        width:53px;
        height:15px;
        background-color:#668899;
      }

   .G{
        position:relative;
        margin:10px 5px 10px 5px;
        float: left;
        top:12.5px;
        left:10px;
        width:84px;
        height:95px;
        border-width:15px 12px 15px 16px;
        border-color:#f0af00;
        border-style:solid;
        border-radius:50%;
       }
       .G:before{
         transform:rotate(45deg);
         position:absolute;
         content:'';
         top:2px;
         left:48px;
         background-color:#ffffff;
         width:90px;
         height:90px;
       }
      .G:after{
        position:absolute;
        content:'';
        bottom:0.5px;
        right:7px;
        width:28px;
        height:36px;
        border-width:13px 14px 0 0;
        border-color:#f0af00;
        border-style:solid;
      }

   .H{
        position:relative;
        margin:10px 10px 10px 5px;
        float: left;
        top:12.5px;
        left:10px;
        width:60px;
        height:125px;
        border-width:0 16px 0 16px;
        border-color:#cde680;
        border-style:solid;
       }
       .H:before{
        position:absolute;
        content:'';
        top:53px;
        left:0;
        width:60px;
        height:14px;
        background-color:#cde680;
       }

   .I{
        z-index:1;
        position:relative;
        margin:10px 10px 10px 10px;
        float: left;
        top:12.5px;
        left:20px;
        width:16px;
        height:125px;
        background-color:#020a0f;
       }

   .J{
         position:relative;
         margin:10px 5px 10px 5px;
         float: left;
         top:12.5px;
         left:-5px;
         width:75px;
         height:66px;
         border-right:solid 16px #b0c0d0;
      }
      .J:before{
         position:absolute;
         content:'';
         bottom:-60px;
         right:-16px;
         width:50px;
         height:60px;
         border-width:0 16px 15px 14px;
         border-color:#b0c0d0;
         border-style:solid;
         border-radius:0 0 75%75%;
       }
       .J:after{
         transform:rotate(-40deg);
         position:absolute;
         content:'';
         top:40px;
         left:-20px;
         width:60px;
         height:60px;
         background-color:#ffffff;
        }

   .K{
       position:relative;
       margin:10px 5px 10px 5px;
       float: left;
       top:12.5px;
       left:10px;
       width:80px;
       height:125px;
       border-left:solid 16px #ce6688;
       overflow:hidden;
      }
      .K:before{
        transform:skew(-43deg,0);
        position:absolute;
        content:'';
        top:0;
        left:16px;
        width:19px;
        height:84px;
        background-color:#ce6688;
      }
      .K:after{
        transform:skew(30deg,0);
        position:absolute;
        content:'';
        bottom:0;
        right:25px;
        width:18px;
        height:80px;
        background-color:#ce6688;
       }

   .L{
        position:relative;
        margin:10px 5px 10px 5px;
        float: left;
        top:12.5px;
        left:10px;
        width:63px;
        height:110px;
        border-width:0 0 15px 16px;
        border-color:#998800;
        border-style:solid;
       }

   .M{
        position:relative;
        margin:10px 5px 10px 5px;
        float: left;
        top:12.5px;
        left:10px;
        width:80px;
        height:125px;
        border-width:0 15px 0 15px;
        border-color:#ff0000;
        border-style:solid;
       }
       .M:before{
        transform:skew(20deg,0);
        position:absolute;
        content:'';
        top:0;
        left:14px;
        width:12px;
        height:110px;
        background-color:#ff0000;
       }
       .M:after{
        transform:skew(-20deg,0);
        position:absolute;
        content:'';
        top:0;
        right:14px;
        width:12px;
        height:110px;
        background-color:#ff0000;
       }

    .N{
        position:relative;
        margin:10px 5px 10px 5px;
        float: left;
        top:12.5px;
        left:10px;
        width:63px;
        height:125px;
        border-width:0 15px 0 15px;
        border-color:#9aff02;
        border-style:solid;
       }
       .N:before{
        transform:skew(30deg,0);
        position:absolute;
        content:'';
        top:0;
        left:24px;
        width:15px;
        height:125px;
        background-color:#9aff02;
      }

   .O{
        position:relative;
        margin:10px 5px 10px 5px;
        float: left;
        top:12.5px;
        left:10px;
        width:70px;
        height:97px;
        border-width:14px 16px 14px 16px;
        border-color:#ffff40;
        border-style:solid;
        border-radius:55% /52%;
       }

    .P{
       position:relative;
       margin:10px 5px 10px 5px;
       float: left;
       top:12.5px;
       left:10px;
       width:60px;
       height:125px;
       border-left:solid 16px #00ffff;
      }
      .P:before{
       position:absolute;
       content:'';
       width:56px;
       height:50px;
       border-width:13px 15px 13px 0;
       border-color:#00ffff;
       border-style:solid;
       border-radius:0 220%220%0 /0 180%180%0;
      }

   .Q {
       z-index:-1;
       position:relative;
       margin:10px 5px 10px 5px;
       float: left;
       top:12.5px;
       left:10px;
       width:70px;
       height:97px;
       border-width:14px 16px 14px 16px;
       border-color:#deff00;
       border-style:solid;
       border-radius:55% /52%;
     }
     .Q:before{
       transform:rotate(-84deg);
       position:absolute;
       content:'';
       top:82px;
       left:49px;
       width:16px;
       height:48px;
       border-width:16px 0 13px 13px;
       border-color:#deff00;
       border-style:solid;
       border-radius:200%0 0 200% /100%0 0 100%;
     }
     .Q:after{
       transform:rotate(-18deg);
       position:absolute;
       content:'';
       bottom:-35px;
       right:-44px;
       width:30px;
       height:30px;
       background-color:#ffffff;
     }

   .R{
     position:relative;
     margin:10px 5px 10px 5px;
     float: left;
     top:12.5px;
     left:10px;
     width:60px;
     height:125px;
     border-left:solid 16px #a0b0c0;
    }
    .R:before{
     position:absolute;
     content:'';
     width:52px;
     height:44px;
     border-width:13px 15px 13px 0;
     border-color:#a0b0c0;
     border-style:solid;
     border-radius:0 220%220%0 /0 180%180%0;
    }
    .R:after{
     transform:skew(32deg,0);
     position:absolute;
     content:'';
     bottom:0;
     left:38px;
     width:18px;
     height:58px;
     background-color:#a0b0c0;
   }

   .S{
     transform:rotate(14deg);
     position:relative;
     margin:10px 5px 10px 5px;
     float: left;
     width:105px;
     height:150px;
     top:10px;
     left:10px;
   }
   .S:before{
     transform:rotate(18deg);
     position:absolute;
     content:'';
     width:44px;
     height:40px;
     border-width:14px 0 15px 15.5px;
     border-color:#ffaf80;
     border-style:solid;
     border-radius:220%0 0 150% /150%0 0 100%;
   }
   .S:after{
    transform:rotate(198deg);
    position:absolute;
    content:'';
    top:65px;
    left:21px;
    width:52px;
    height:44px;
    border-width:14px 0 15px 15px;
    border-color:#ffaf80;
    border-style:solid;
    border-radius:240%0 0 110% /140%0 0 100%;
    }

   .T{
      position:relative;
      margin:10px 5px 10px 5px;
      float: left;
      top:12.5px;
      left:10px;
      width:100px;
      height:125px;
      border-top:solid 15px #ffd0e0;
    }
   .T:before{
    position:absolute;
    content:'';
    top:0;
    left:42px;
    width:16px;
    height:110px;
    background-color:#ffd0e0;
   }

  .U{
    position:relative;
    margin:10px 5px 10px 5px;
    float: left;
    top:12.5px;
    left:10px;
    width:60px;
    height:80px;
    border-width:0 16px 0 16px;
    border-color:#ff8f01;
    border-style:solid;
   }
   .U:before{
    position:absolute;
    content:'';
    top:65px;
    left:-16px;
    width:60px;
    height:45px;
    border-width:0 16px 15px 16px;
    border-color:#ff8f01;
    border-style:solid;
    border-radius:0 0 200%200% /0 0 300%300%;
   }

  .V{
     position:relative;
     margin:10px 5px 10px 5px;
     float: left;
     top:12.5px;
     left:30px;
     width:59px;
    }
    .V:before{
     transform:skew(18deg,0);
     position:absolute;
     content:'';
     top:0;
     left:0;
     height:125px;
     border-left:solid 16px #008800;
   }
   .V:after{
     transform:skew(-18deg,0);
     position:absolute;
     content:'';
     top:0;
     right:0;
     height:125px;
     border-left:solid 16px #008800;
   }

   .W{
     position:relative;
     margin:10px 5px 10px 40px;
     float: left;
     top:12.5px;
     left:25px;
     width:100px;
    }
    .W:before{
     transform:skew(11deg,0);
     position:absolute;
     content:'';
     top:0;
     left:0;
     width:42px;
     height:125px;
     border-width:0 13px 0 15px;
     border-color:#000000;
     border-style:solid;
    }
    .W:after{
     transform:skew(-11deg,0);
     position:absolute;
     content:'';
     top:0;
     right:0;
     width:42px;
     height:125px;
     border-width:0 15px 0 13px;
     border-color:#000000;
     border-style:solid;
    }

  .X{
     position:relative;
     margin:10px 5px 10px 25px;
     float: left;
     top:12.5px;
     left:50px;
     width:16px;
     height:125px;
    }
    .X:before{
     transform:skew(32deg,0);
     position:absolute;
     content:'';
     top:0;
     left:0;
     width:16px;
     height:125px;
     background-color:#0066ff;
    }
    .X:after{
     transform:skew(-32deg,0);
     position:absolute;
     content:'';
     top:0;
     right:0;
     width:16px;
     height:125px;
     background-color:#0066ff;
    }

  .Y{
     position:relative;
     margin:10px 5px 10px 80px;
     float: left;
     top:92.5px;
     left:52px;
     width:16px;
     height:50px;
     background-color:#22ff55;
    }
    .Y:before{
     transform:skew(28deg,0);
     position:absolute;
     content:'';
     top:-80px;
     left:-21px;
     width:16px;
     height:80px;
     background-color:#22ff55;
    }
    .Y:after{
     transform:skew(-28deg,0);
     position:absolute;
     content:'';
     top:-80px;
     right:-21px;
     width:16px;
     height:80px;
     background-color:#22ff55;
    }

  .Z{
     position:relative;
     margin:20px 5px 10px 80px;
     float: left;
     top:12.5px;
     left:10px;
     width:90px;
     height:95px;
     border-width:15px 0 15px 0;
     border-color:#336699;
     border-style:solid;
    }
    .Z:before{
     transform:skew(-37deg,0);
     position:absolute;
     content:'';
     top:0;
     left:36px;
     width:18px;
     height:95px;
     background-color:#336699;
    }

完整的HTML5+CSS3版Demo。

效果截图：

Atas ialah kandungan terperinci 如何使用纯CSS3绘制26个英文字母的示例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!