zoukankan      html  css  js  c++  java
  • css3 linear-gradient实现购物车地址选择信封效果

    上代码:

     1 <!DOCTYPE html>
     2 <html>
     3 
     4     <head>
     5         <meta charset="UTF-8">
     6         <title></title>
     7         <link rel="stylesheet" href="css/normalize.css" />
     8         <link rel="stylesheet" href="css/font-awesome.min.css" />
     9         <style>
    10             
    11             .letter-box {
    12                 width: 278px;
    13                 height: 176px;
    14                 padding: 5px;
    15                 box-sizing: border-box;
    16                 margin: 50px auto;
    17             }
    18             
    19             .letter-border {
    20                 width: 100%;
    21                 height: 100%;
    22                 background: #fbfaf5;
    23             }
    24             
    25             .letter-box {
    26                 width: 278px;
    27                 height: 176px;
    28                 padding: 5px;
    29                 box-sizing: border-box;
    30                 background: linear-gradient(45deg, #f25953 12.5%, #fbfaf5 12.5%, #fbfaf5 25%, #5590d6 25%, #5590d6 37.5%, #fbfaf5 37.5%, #fbfaf5 50%, #f25953 50%, #f25953 62.5%, #fbfaf5 62.5%, #fbfaf5 75%, #5590d6 75%, #5590d6 87.5%, #fbfaf5 87.5%, #fbfaf5 100%);
    31                 background-size: 70px 70px;
    32             }
    33         </style>
    34     </head>
    35 
    36     <body>
    37         <div class="letter-box">
    38             <div class="letter-border">
    39 
    40             </div>
    41         </div>
    42 
    43     </body>
    44 
    45 </html>

    效果:

  • 相关阅读:
    DNS服务器原理简述、搭建主/从DNS服务器并实现智能解析
    JQuery02
    JQuery01
    python05
    python04
    python03
    Liunx命令
    Python运算符及注释
    python01
    原生JDBC+mybatis
  • 原文地址:https://www.cnblogs.com/panda-ling/p/6322402.html
Copyright © 2011-2022 走看看