• css3 border-radius

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.    <meta charset="UTF-8">
    5.    <title>CSS3 边框</title>
    6.    <style>
    7.       body, ul, li, dl, dt, dd, h1, h2, h3, h4, h5 {
    8.          margin: 0;
    9.          padding: 0;
    10.       }
    11.  
    12.       body {
    13.          background-color: #F7F7F7;
    14.       }
    15.  
    16.       .wrapper {
    17.          width: 1000px;
    18.          margin: 0 auto;
    19.          padding: 20px;
    20.          box-sizing: border-box;
    21.       }
    22.  
    23.       header {
    24.          padding: 20px 0;
    25.          margin-bottom: 20px;
    26.          text-align: center;
    27.       }
    28.  
    29.       header h3 {
    30.          line-height: 1;
    31.          font-weight: normal;
    32.          font-size: 28px;
    33.       }
    34.  
    35.       .main {
    36.          /*overflow: hidden;*/
    37.       }
    38.  
    39.       .main:after {
    40.          content: '';
    41.          clear: both;
    42.          display: block;
    43.       }
    44.  
    45.       .main .item {
    46.          width: 210px;
    47.          height: 210px;
    48.          margin: 0 30px 30px 0;
    49.          display: flex;
    50.          position: relative;
    51.          background-color: #FFF;
    52.          float: left;
    53.          box-shadow: 2px 2px 5px #CCC;
    54.       }
    55.  
    56.       .main .item:after {
    57.          content: attr(data-brief);
    58.          display: block;
    59.          width: 100%;
    60.          height: 100%;
    61.          text-align: center;
    62.          line-height: 210px;
    63.          position: absolute;
    64.          top: 0;
    65.          left: 0;
    66.          color: #FFF;
    67.          font-family: '微软雅黑';
    68.          font-size: 18px;
    69.          background-color: rgba(170, 170, 170, 0);
    70.          z-index: -1;
    71.          transition: all 0.3s ease-in;
    72.       }
    73.  
    74.       .main .item:hover:after {
    75.          background-color: rgba(170, 170, 170, 0.6);
    76.          z-index: 100;
    77.       }
    78.  
    79.       .main .item:nth-child(4n) {
    80.          margin-right: 0;
    81.       }
    82.  
    83.       /*.main .item:nth-last-child(-n+5) {
    84.          margin-bottom: 0;
    85.       }*/
    86.  
    87.       /* 以上是骨架样式 */
    88.       /* 1、2、3、4 顺时针 */
    89.       .border-radius {
    90.          width: 180px;
    91.          height: 180px;
    92.          margin: auto;
    93.          border: 1px solid red;
    94.          /*border-radius: 50% 30% 20%;*/
    95.       }
    96.  
    97.       .square {
    98.          border-radius: 0;
    99.       }
    100.  
    101.       /*拱形*/
    102.       .item:nth-child(1) .border-radius {
    103.          border-radius: 90px;
    104.       }
    105.  
    106.       /*拱形*/
    107.       .item:nth-child(2) .border-radius {
    108.          border-radius: 90px 90px 0 0;
    109.       }
    110.  
    111.       /*半圆*/
    112.       .item:nth-child(3) .border-radius {
    113.          height: 90px;
    114.          border-radius: 90px 90px 0 0;
    115.       }
    116.  
    117.       /*左上角*/
    118.       .item:nth-child(4) .border-radius {
    119.          /*height: 90px;*/
    120.          border-radius: 90px 0 0 0;
    121.       }
    122.  
    123.       /*四分之一圆*/
    124.       .item:nth-child(5) .border-radius {
    125.          width: 90px;
    126.          height: 90px;
    127.          border-radius: 90px 0 0 0;
    128.       }
    129.  
    130.       /*横着的椭圆*/
    131.       .item:nth-child(6) .border-radius {
    132.          height: 90px;
    133.          /*border-radius: 50%;*/
    134.          border-radius: 90px 90px 90px 90px / 45px 45px 45px 45px;
    135.          /*border-radius: 45px / 90px;*/
    136.       }
    137.  
    138.       /*竖着的椭圆*/
    139.       .item:nth-child(7) .border-radius {
    140.          width: 90px;
    141.          border-radius: 45px 45px 45px 45px / 90px 90px 90px 90px;
    142.       }
    143.  
    144.       /*半个横着的椭圆*/
    145.       .item:nth-child(8) .border-radius {
    146.          height: 45px;
    147.          border-radius: 90px 90px 0 0 / 45px 45px 0 0;
    148.       }
    149.  
    150.       /*半个竖着的椭圆*/
    151.       .item:nth-child(9) .border-radius {
    152.          width: 45px;
    153.          border-radius: 45px 0 0 45px / 90px 0 0 90px;
    154.       }
    155.  
    156.       /*四分之一竖着的椭圆*/
    157.       .item:nth-child(10) .border-radius {
    158.          width: 45px;
    159.          height: 90px;
    160.          border-radius: 45px 0 0 0 / 90px 0 0 0;
    161.       }
    162.  
    163.       /*饼环*/
    164.       .item:nth-child(11) .border-radius {
    165.          width: 40px;
    166.          height: 40px;
    167.          border: 70px solid red;
    168.          border-radius: 90px;
    169.       }
    170.  
    171.       /*圆饼*/
    172.       .item:nth-child(12) .border-radius {
    173.          width: 40px;
    174.          height: 40px;
    175.          border: 70px solid red;
    176.          border-radius: 60px;
    177.       }
    178.  
    179.       /*左上角圆饼*/
    180.       .item:nth-child(13) .border-radius {
    181.          width: 60px;
    182.          height: 60px;
    183.          border: 60px solid red;
    184.          border-radius: 90px 0 0 0;
    185.       }
    186.  
    187.       /*对角圆饼*/
    188.       .item:nth-child(14) .border-radius {
    189.          width: 60px;
    190.          height: 60px;
    191.          border: 60px solid red;
    192.          border-radius: 90px 0 90px 0;
    193.       }
    194.  
    195.       /*四边不同色*/
    196.       .item:nth-child(15) .border-radius {
    197.          width: 0px;
    198.          height: 0px;
    199.          border-width: 90px;
    200.          border-style: solid;
    201.          border-color: red green yellow blue;
    202.       }
    203.  
    204.       /*右透明色*/
    205.       .item:nth-child(16) .border-radius {
    206.          width: 0px;
    207.          height: 0px;
    208.          border-width: 90px;
    209.          border-style: solid;
    210.          border-color: red green yellow blue;
    211.          border-right-color: transparent;
    212.       }
    213.  
    214.       /*圆右透明色*/
    215.       .item:nth-child(17) .border-radius {
    216.          width: 0px;
    217.          height: 0px;
    218.          border-width: 90px;
    219.          border-style: solid;
    220.          border-color: red;
    221.          border-right-color: transparent;
    222.          border-radius: 90px;
    223.       }
    224.  
    225.       /*圆右红透明色*/
    226.       .item:nth-child(18) .border-radius {
    227.          width: 0px;
    228.          height: 0px;
    229.          border-width: 90px;
    230.          border-style: solid;
    231.          border-color: transparent;
    232.          border-right-color: red;
    233.          border-radius: 90px;
    234.       }
    235.  
    236.       /*阴阳图前世*/
    237.       .item:nth-child(19) .border-radius {
    238.          width: 180px;
    239.          height: 0px;
    240.          border-top-width: 90px;
    241.          border-bottom-width: 90px;
    242.          border-style: solid;
    243.          border-top-color: red;
    244.          border-bottom-color: green;
    245.          /*border-right-color: red;*/
    246.          border-radius: 90px;
    247.       }
    248.  
    249.       /*阴阳图前世2*/
    250.       .item:nth-child(20) .border-radius {
    251.          width: 180px;
    252.          height: 90px;
    253.          border-bottom-width: 90px;
    254.          border-style: solid;
    255.          border-bottom-color: green;
    256.          background-color: red;
    257.          /*border-right-color: red;*/
    258.          border-radius: 90px;
    259.       }
    260.  
    261.       /*阴阳图今生*/
    262.       .item:nth-child(21) .border-radius {
    263.          width: 180px;
    264.          height: 90px;
    265.          border-bottom-width: 90px;
    266.          border-style: solid;
    267.          border-bottom-color: green;
    268.          background-color: red;
    269.          border-radius: 90px;
    270.          position: relative;
    271.       }
    272.  
    273.       .item:nth-child(21) .border-radius::after,
    274.       .item:nth-child(21) .border-radius::before {
    275.          content: '';
    276.          position: absolute;
    277.          top: 50%;
    278.          width: 20px;
    279.          height: 20px;
    280.          /*margin: -10px 0 0 0;*/
    281.          border-width: 35px;
    282.          border-style: solid;
    283.          /*border-radius: 45px;*/
    284.       }
    285.  
    286.       /*左阴阳*/
    287.       .item:nth-child(21) .border-radius::after {
    288.          background-color: red;
    289.          border-color: green;
    290.       }
    291.       /*右阴阳*/
    292.       .item:nth-child(21) .border-radius::before {
    293.          background-color: green;
    294.          border-color: red;
    295.          right: 0;
    296.       }
    297.    </style>
    298. </head>
    299. <body>
    300.    <div class="wrapper">
    301.       <header>
    302.          <h3>CSS3 边框圆角</h3>
    303.       </header>
    304.       <div class="main">
    305.          <div class="item" data-brief="整圆">
    306.             <div class="border-radius"></div>
    307.          </div>
    308.          <div class="item" data-brief="拱形">
    309.             <div class="border-radius"></div>
    310.          </div>
    311.          <div class="item" data-brief="半圆">
    312.             <div class="border-radius"></div>
    313.          </div>
    314.          <div class="item" data-brief="左上角">
    315.             <div class="border-radius"></div>
    316.          </div>
    317.          <div class="item" data-brief="四分之一圆">
    318.             <div class="border-radius"></div>
    319.          </div>
    320.          <div class="item" data-brief="横着的椭圆">
    321.             <div class="border-radius"></div>
    322.          </div>
    323.          <div class="item" data-brief="竖着的椭圆">
    324.             <div class="border-radius"></div>
    325.          </div>
    326.          <div class="item" data-brief="半个横着的椭圆">
    327.             <div class="border-radius"></div>
    328.          </div>
    329.          <div class="item" data-brief="半个竖着的椭圆">
    330.             <div class="border-radius"></div>
    331.          </div>
    332.          <div class="item" data-brief="四分之一竖着的椭圆">
    333.             <div class="border-radius"></div>
    334.          </div>
    335.          <div class="item" data-brief="饼环">
    336.             <div class="border-radius"></div>
    337.          </div>
    338.          <div class="item" data-brief="圆饼">
    339.             <div class="border-radius"></div>
    340.          </div>
    341.          <div class="item" data-brief="左上角圆饼">
    342.             <div class="border-radius"></div>
    343.          </div>
    344.          <div class="item" data-brief="对角圆饼">
    345.             <div class="border-radius"></div>
    346.          </div>
    347.          <div class="item" data-brief="四边不同色">
    348.             <div class="border-radius"></div>
    349.          </div>
    350.          <div class="item" data-brief="右透明色">
    351.             <div class="border-radius"></div>
    352.          </div>
    353.          <div class="item" data-brief="圆右透明色">
    354.             <div class="border-radius"></div>
    355.          </div>
    356.          <div class="item" data-brief="圆右红透明色">
    357.             <div class="border-radius"></div>
    358.          </div>
    359.          <div class="item" data-brief="阴阳图前世">
    360.             <div class="border-radius"></div>
    361.          </div>
    362.          <div class="item" data-brief="阴阳图前世2">
    363.             <div class="border-radius"></div>
    364.          </div>
    365.          <div class="item" data-brief="阴阳图今生">
    366.             <div class="border-radius"></div>
    367.          </div>
    368.          <div class="item" data-brief="">
    369.             <div class="border-radius"></div>
    370.          </div>
    371.          <div class="item" data-brief="">
    372.             <div class="border-radius" style="border:3px solid blue;"></div>
    373.          </div>
    374.       </div>
    375.    </div>
    376. </body>
    377. </html>
  • 相关阅读:
    NC 6系总账凭证联查原始单据
    NCUAP 利用java自带方法实现导入excel取数据
    NC 5导出Excel
    nc 画界面，触发效果（第一种）
    nc6 用业务插件注册来跑按钮事件
    NC 自定义参照类
    SVN忘记登陆用户
    Oracle 忘记sys与system管理员密码重置操作
    OC-之AFNetworking
    OC-之NSDate、万年历
  • 原文地址：https://www.cnblogs.com/wangyawei/p/9099828.html
Copyright © 2020-2023  润新知