17-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.         }
  12.         body {
  13.             background-color: #F7F7F7;
  14.         }
  16.         .wrapper {
  17.             width: 1000px;
  18.             margin: 0 auto;
  19.             padding: 20px;
  20.             box-sizing: border-box;
  21.         }
  23.         header {
  24.             padding: 20px 0;
  25.             margin-bottom: 20px;
  26.             text-align: center;
  27.         }
  29.         header h3 {
  30.             line-height: 1;
  31.             font-weight: normal;
  32.             font-size: 28px;
  33.         }
  35.         .main {
  36.             /*overflow: hidden;*/
  37.         }
  39.         .main:after {
  40.             content: '';
  41.             clear: both;
  42.             display: block;
  43.         }
  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.         }
  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.         }
  74.         .main .item:hover:after {
  75.             background-color: rgba(170, 170, 170, 0.6);
  76.             z-index: 100;
  77.         }
  79.         .main .item:nth-child(4n) {
  80.             margin-right: 0;
  81.         }
  83.         /*.main .item:nth-last-child(-n+5) {
  84.             margin-bottom: 0;
  85.         }*/
  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.         }
  97.         .square {
  98.             border-radius: 0;
  99.         }
  101.         /*拱形*/
  102.         .item:nth-child(1) .border-radius {
  103.             border-radius: 90px;
  104.         }
  106.         /*拱形*/
  107.         .item:nth-child(2) .border-radius {
  108.             border-radius: 90px 90px 0 0;
  109.         }
  111.         /*半圆*/
  112.         .item:nth-child(3) .border-radius {
  113.             height: 90px;
  114.             border-radius: 90px 90px 0 0;
  115.         }
  117.         /*左上角*/
  118.         .item:nth-child(4) .border-radius {
  119.             /*height: 90px;*/
  120.             border-radius: 90px 0 0 0;
  121.         }
  123.         /*四分之一圆*/
  124.         .item:nth-child(5) .border-radius {
  125.             width: 90px;
  126.             height: 90px;
  127.             border-radius: 90px 0 0 0;
  128.         }
  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.         }
  138.         /*竖着的椭圆*/
  139.         .item:nth-child(7) .border-radius {
  140.             width: 90px;
  141.             border-radius: 45px 45px 45px 45px / 90px 90px 90px 90px;
  142.         }
  144.         /*半个横着的椭圆*/
  145.         .item:nth-child(8) .border-radius {
  146.             height: 45px;
  147.             border-radius: 90px 90px 0 0 / 45px 45px 0 0;
  148.         }
  150.         /*半个竖着的椭圆*/
  151.         .item:nth-child(9) .border-radius {
  152.             width: 45px;
  153.             border-radius: 45px 0 0 45px / 90px 0 0 90px;
  154.         }
  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.         }
  163.         /*饼环*/
  164.         .item:nth-child(11) .border-radius {
  165.             width: 40px;
  166.             height: 40px;
  167.             border: 70px solid red;
  168.             border-radius: 90px;
  169.         }
  171.         /*圆饼*/
  172.         .item:nth-child(12) .border-radius {
  173.             width: 40px;
  174.             height: 40px;
  175.             border: 70px solid red;
  176.             border-radius: 60px;
  177.         }
  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.         }
  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.         }
  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.         }
  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.         }
  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.         }
  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.         }
  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.         }
  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.         }
  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.         }
  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.         }
  286.         /*左阴阳*/
  287.         .item:nth-child(21) .border-radius::after {
  288.             background-color: red;
  289.             border-color: green;
  290.         }
  292.         /*右阴阳*/
  293.         .item:nth-child(21) .border-radius::before {
  294.             background-color: green;
  295.             border-color: red;
  296.             right: 0;
  297.         }
  299.         /*右阴阳*/
  300.         .item:nth-child(22) .border-radius {
  301.             width: 180px;
  302.             height: 90px;
  303.             border-bottom-width: 90px;
  304.             border-bottom-color: green;
  305.             border-bottom-style: solid;
  306.             background-color: red;
  307.             border-radius: 90px;
  308.             position: relative;
  309.         }
  311.         .item:nth-child(22) .border-radius::after,
  312.         .item:nth-child(22) .border-radius::before {
  313.             content: '';
  314.             position: absolute;
  315.             top: 50%;
  316.             width: 20px;
  317.             height: 20px;
  318.             border-width: 35px;
  319.             border-style: solid;
  320.             border-radius: 45px;
  321.         }
  323.         .item:nth-child(22) .border-radius::before {
  324.             border-color: green;
  325.             background-color: red;
  326.         }
  328.         .item:nth-child(22) .border-radius::after {
  329.             right: 0;
  330.             border-color: red;
  331.             background-color: green;
  332.         }
  334.         /*消息框*/
  335.         .item:nth-child(23) .border-radius {
  336.             width: 160px;
  337.             height: 80px;
  338.             background-color: red;
  339.             border-radius: 6px;
  340.             position: relative;
  341.         }
  343.         .item:nth-child(23) .border-radius::after {
  344.             content: '';
  345.             width: 0;
  346.             height: 0;
  347.             border-width: 10px;
  348.             border-style: solid;
  349.             border-color: transparent;
  350.             border-right-color: red;
  351.             position: absolute;
  352.             top: 16px;
  353.             left: -20px;
  354.         }
  356.         /*奇怪的图形*/
  357.         .item:nth-child(24) .border-radius {
  358.             width: 40px;
  359.             height: 40px;
  360.             border-width: 45px 0 45px 70px;
  361.             border-style: solid;
  362.             border-radius: 0 0 60px 0;
  363.             border-color: red;
  364.         }
  366.         /*奇怪的图形2*/
  367.         .item:nth-child(25) .border-radius {
  368.             width: 100px;
  369.             height: 40px;
  370.             border-width: 45px 20px 45px 70px;
  371.             border-style: solid;
  372.             border-radius: 60px;
  373.             border-color: red;
  374.         }
  376.         /*QQ对话*/
  377.         .item:nth-child(26) .border-radius {
  378.             width: 160px;
  379.             height: 80px;
  380.             background-color: red;
  381.             border-radius: 6px;
  382.             position: relative;
  383.         }
  385.         .item:nth-child(26) .border-radius::after {
  386.             content: '';
  387.             position: absolute;
  388.             top: 0;
  389.             right: -20px;
  390.             width: 30px;
  391.             height: 30px;
  392.             border-width: 0 0 30px 30px;
  393.             border-style: solid;
  394.             border-bottom-color: red;
  395.             border-left-color: transparent;
  396.             border-radius: 0 0 60px 0;
  397.         }
  399.         /*圆角的百分比设置 */
  400.         .item:nth-child(27) .border-radius {
  401.             width: 180px;
  402.             /*height: 180px;*/
  403.             height: 90px;
  404.             border-radius: 50%;
  405.             border-radius: 90px/45px;
  407.             /*百分比是按横竖两个对应的方向的长度进行计算*/
  408.         }
  410.     </style>
  411. </head>
  412. <body>
  413. <div class="wrapper">
  414.     <header>
  415.         <h3>CSS3 边框圆角</h3>
  416.     </header>
  417.     <div class="main">
  418.         <div class="item" data-brief="整圆">
  419.             <div class="border-radius"></div>
  420.         </div>
  421.         <div class="item" data-brief="拱形">
  422.             <div class="border-radius"></div>
  423.         </div>
  424.         <div class="item" data-brief="半圆">
  425.             <div class="border-radius"></div>
  426.         </div>
  427.         <div class="item" data-brief="左上角">
  428.             <div class="border-radius"></div>
  429.         </div>
  430.         <div class="item" data-brief="四分之一圆">
  431.             <div class="border-radius"></div>
  432.         </div>
  433.         <div class="item" data-brief="横着的椭圆">
  434.             <div class="border-radius"></div>
  435.         </div>
  436.         <div class="item" data-brief="竖着的椭圆">
  437.             <div class="border-radius"></div>
  438.         </div>
  439.         <div class="item" data-brief="半个横着的椭圆">
  440.             <div class="border-radius"></div>
  441.         </div>
  442.         <div class="item" data-brief="半个竖着的椭圆">
  443.             <div class="border-radius"></div>
  444.         </div>
  445.         <div class="item" data-brief="四分之一竖着的椭圆">
  446.             <div class="border-radius"></div>
  447.         </div>
  448.         <div class="item" data-brief="饼环">
  449.             <div class="border-radius"></div>
  450.         </div>
  451.         <div class="item" data-brief="圆饼">
  452.             <div class="border-radius"></div>
  453.         </div>
  454.         <div class="item" data-brief="左上角圆饼">
  455.             <div class="border-radius"></div>
  456.         </div>
  457.         <div class="item" data-brief="对角圆饼">
  458.             <div class="border-radius"></div>
  459.         </div>
  460.         <div class="item" data-brief="四边不同色">
  461.             <div class="border-radius"></div>
  462.         </div>
  463.         <div class="item" data-brief="右透明色">
  464.             <div class="border-radius"></div>
  465.         </div>
  466.         <div class="item" data-brief="圆右透明色">
  467.             <div class="border-radius"></div>
  468.         </div>
  469.         <div class="item" data-brief="圆右红透明色">
  470.             <div class="border-radius"></div>
  471.         </div>
  472.         <div class="item" data-brief="阴阳图前世">
  473.             <div class="border-radius"></div>
  474.         </div>
  475.         <div class="item" data-brief="阴阳图前世2">
  476.             <div class="border-radius"></div>
  477.         </div>
  478.         <div class="item" data-brief="阴阳图今生">
  479.             <div class="border-radius"></div>
  480.         </div>
  481.         <div class="item" data-brief="阴阳图今生2">
  482.             <div class="border-radius"></div>
  483.         </div>
  484.         <div class="item" data-brief="消息框">
  485.             <div class="border-radius"></div>
  486.         </div>
  487.         <div class="item" data-brief="奇怪的图形">
  488.             <div class="border-radius"></div>
  489.         </div>
  490.         <div class="item" data-brief="奇怪的图形2">
  491.             <div class="border-radius"></div>
  492.         </div>
  493.         <div class="item" data-brief="QQ对话">
  494.             <div class="border-radius"></div>
  495.         </div>
  496.         <div class="item" data-brief="圆角百分比">
  497.             <div class="border-radius"></div>
  498.         </div>
  499.     </div>
  500. </div>
  501. </body>
  502. </html>

效果如下：

17-CSS3的常见边框汇总 - 图1

爱心

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         .heart {
  8.             width: 200px;
  9.             height: 300px;
  10.             /*border: 1px solid #000;*/
  11.             margin: 100px auto;
  12.             position: relative;
  13.         }
  15.         .heart::before, .heart::after {
  16.             content: "左一半";
  17.             width: 100%;
  18.             height: 100%;
  19.             position: absolute;
  20.             background-color: red;
  21.             left: 0;
  22.             top: 0;
  24.             border-radius: 100px 100px 0 0;
  25.             transform: rotate(-45deg);
  26.             text-align: center;
  27.             line-height: 100px;
  28.             color: yellow;
  29.             font-size: 30px;
  30.             font-family: "MIcrosoft Yahei";
  31.         }
  33.         .heart::after {
  34.             content: "右一半";
  35.             left: 71px;
  36.             transform: rotate(45deg);
  37.         }
  38.     </style>
  39. </head>
  40. <body>
  41. <div class="heart">
  43. </div>
  44. </body>
  45. </html>

效果如下：

17-CSS3的常见边框汇总 - 图2

它其实是下面这两个盒子叠起来的：

17-CSS3的常见边框汇总 - 图3

改变 .heart::after 的 left值，即可叠起来。