1. <!DOCTYPE html>
    2. <html>
    4. <head lang="en">
    5.   <meta charset="UTF-8">
    6.   <title>圆柱体</title>
    7.   <style>
    8.     .yuanzhu {
    9.       position: relative;
    10.       height: 200px;
    11.       width: 50px;
    12.       background: linear-gradient(left, #0158a9, #0095cf);
    13.       background: -ms-linear-gradient(left, #0158a9, #0095cf);
    14.       background: -webkit-linear-gradient(left, #0158a9, #0095cf);
    15.       background: -moz-linear-gradient(left, #0158a9, #0095cf);
    16.       margin: 30px auto;
    17.       z-index: 999
    18.     }
    20.     .yuanzhu:before {
    21.       position: absolute;
    22.       top: -10px;
    23.       content: "";
    24.       width: 50px;
    25.       height: 20px;
    26.       border-radius: 50%;
    27.       background: #2193d0;
    28.       z-index: 99
    29.     }
    31.     .yuanzhu:after {
    32.       position: absolute;
    33.       bottom: -10px;
    34.       content: "";
    35.       width: 50px;
    36.       height: 20px;
    37.       border-radius: 50%;
    38.       background: linear-gradient(left, #0158a9, #0095cf);
    39.       background: -ms-linear-gradient(left, #0158a9, #0095cf);
    40.       background: -webkit-linear-gradient(left, #0158a9, #0095cf);
    41.       background: -moz-linear-gradient(left, #0158a9, #0095cf);
    42.       z-index: 9
    43.     }
    44.   </style>
    45.   </head>
    47. <body>
    48.     <div class="yuanzhu"></div>
    49. </body>
    50. </html>