欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

css3 border-radius

程序员文章站 2022-06-27 22:26:26
CSS3 边框 CSS3 边框圆角 ... ......
  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="

上一篇： 利用接口及抽象类设计实现

下一篇： 深入V8引擎-引擎内部类管理解析

推荐阅读