1.在阅读css3揭秘的基础上，跟着书中的效果组合起来的这组代码。

2.代码中有四张图片分别是 1.jpg 2.jpg  3.jpg 4.jpg; 作为demo，图片名称没有语义。

3.兼容性：  IE上有部分并不兼容，Edge，FF，chrome没有问题。

4.下面是一个选择器的实现：

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>$$工具函数</title>
  6.  </head>
  7.  <body>
  8.  <div class="box"> </div>
  9.  <div class="box"> </div>
  10.  <script>
  11.     function $$(selector,context){
  12.              context = context || document;
  13.              var elements = context.querySelectorAll(selector);
  14.              return Array.prototype.slice.call(elements);
  15.     }
  16.      console.log($$(".box"));
  17.  </script>
  18.  </body>
  19.  </html>

5.效果如图：

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.      <style>
  7.          div{
  8.              /*width:200px;*/
  9.              /*height:100px;*/
  10.          }
  11.          .box{
  12.              /*background:linear-gradient(90deg,yellow,red);*/
  13.              /*线性渐变*/
  14.              background: linear-gradient(45deg,yellow 25%,red 0,red 50%,yellow 0,yellow 75%,red 0);
  15.              /*background-size:30px 30px;*/
  16.          }
  17.          /*在浏览器支持这个css特性的时候应用的样式,类似媒体查询*/
  18.          @supports (background: red){
  19.              .supports{
  20.                  background: red;
  21.              }
  22.          }
  23.          /*currenColor*/
  24.          .reduceCode{
  25.              width:60vw;
  26.              height: 60vh;
  27.              color: red;
  28.              text-align: center;
  29.          }
  30.          .reduceCode hr{
  31.              height:.5rem;
  32.              background: currentColor;
  33.          }
  34.  
  35.          /*背景*/
  36.          .box1{
  37.              width:300px;
  38.              height:300px;
  39.              border:10px solid hsla(0,0%,100%,.5);
  40.              background: red;
  41.              background-clip:padding-box;
  42.          }
  43.          .borderimg{
  44.              width:100px;
  45.              height:100px;
  46.              background: yellow;
  47.  
  48.              border-image:url("1.jpg");
  49.          }
  50.          .backgroudpos{
  51.              width:750px;
  52.              height: 423px;
  53.              background: url("1.jpg") no-repeat;
  54.              border:1px solid red;
  55.              /*这个是background-position扩展语法,可以指定位置距离哪个边多少距离*/
  56.              background-position: right 20px bottom 30px;
  57.          }
  58.          .calc{
  59.              width:750px;
  60.              height: 423px;
  61.              background: url("1.jpg") no-repeat;
  62.              border:1px solid red;
  63.              /*与上边的作用相同，用calc()属性,计算百分比和像素的关系*/
  64.              background-position: calc(100% - 20px) calc(100% - 30px);
  65.              /*background-position: 100% 100%;*/
  66.          }
  67.  
  68.          .f{
  69.              width:300px;
  70.              height:200px;
  71.              border:1px solid red;
  72.          }
  73.          .f .s{
  74.              width:calc(50% - 10px);
  75.              height:calc(50% + 10px);
  76.              border:1px solid blue;
  77.          }
  78.  
  79.          /*内圆角*/
  80.          .radius{
  81.              width:300px;
  82.              height:300px;
  83.              /*border:1px solid red;*/
  84.              /*正文,效果自行观看，原因在于描边并不会跟着元素的圆角走，但bo-shadow却会跟着圆角走。*/
  85.              background: tan;
  86.              border-radius:.8em;
  87.              padding:1em;
  88.              box-shadow: 0 0 0 .6em #665;
  89.              outline:.6em solid #665;
  90.          }
  91.  
  92.          /*条纹背景*/
  93.          .gradient{
  94.              width:600px;
  95.              height:300px;
  96.              /*这种repeating的方法不用设置background-size*/
  97.              /*background: repeating-linear-gradient(60deg,red  0,red 15px,blue 0 ,blue 30px);*/
  98.              /*同色系条纹 还可以用透明色*/
  99.              background:repeating-linear-gradient(60deg,lightblue 0,lightblue 15px,transparent 0,transparent 30px)
  100.          }
  101.  
  102.          /*网格*/
  103.          .wangge{
  104.              width: 600px;
  105.              height:400px;
  106.  
  107.              background: white;
  108.              background-image: linear-gradient(90deg,rgba(200,0,0,.5) 50%,transparent 0),linear-gradient(rgba(200,0,0,.5) 50%,transparent 0);
  109.              background-size:30px 30px;
  110.          }
  111.          .wangge2{
  112.              width: 600px;
  113.              height:400px;
  114.              /*用像素单位去画网格线*/
  115.              background: #58a;
  116.              background-image: linear-gradient(90deg,white 1px ,transparent 0),linear-gradient(white 1px ,transparent 0);
  117.              background-size:30px 30px;
  118.          }
  119.          .wangge3{
  120.              width: 600px;
  121.              height:400px;
  122.              /*蓝图网格*/
  123.              background: #58a;
  124.              background-image:linear-gradient(90deg,white 2px ,transparent 0),linear-gradient(white 2px ,transparent 0),
  125.              linear-gradient(90deg,white 1px ,transparent 0),linear-gradient(white 1px ,transparent 0);
  126.              background-size: 75px 75px,75px 75px,15px 15px,15px 15px;
  127.          }
  128.  
  129.          /*径向渐变和波点*/
  130.          .bodian{
  131.              width:600px;
  132.              height:400px;
  133.              background: #665;
  134.              background-image: radial-gradient(tan 30%,transparent 0);
  135.              background-size: 30px 30px;
  136.          }
  137.          .bodian2{
  138.              width:600px;
  139.              height:400px;
  140.              background: #665;
  141.              background-image: radial-gradient(tan 30%,transparent 0),radial-gradient(tan 30%,transparent 0);
  142.              background-size:30px 30px;
  143.              background-position: 0 0,15px 15px;
  144.          }
  145.  
  146.          /*棋盘*/
  147.          .sanjiaowen{
  148.              width:600px;
  149.              height:400px;
  150.              background: #eee;
  151.              background-image: linear-gradient(45deg,#bbb 50%,transparent 0);
  152.              background-size: 30px 30px;
  153.          }
  154.          .qipan1{
  155.              width:600px;
  156.              height:400px;
  157.              background: #eee;
  158.              background-image: linear-gradient(45deg,#bbb 25%,transparent 0);
  159.              background-size: 30px 30px;
  160.          }
  161.          .qipan2{
  162.              width:600px;
  163.              height:400px;
  164.              background: #eee;
  165.              background-image: linear-gradient(45deg,transparent 75%,#bbb 0);
  166.              background-size: 30px 30px;
  167.          }
  168.          .qipan3{
  169.              width:600px;
  170.              height:400px;
  171.              background: #eee;
  172.              background-image: linear-gradient(45deg,transparent 75%,#bbb 0),linear-gradient(45deg,#bbb 25%,transparent 0);
  173.              background-size: 30px 30px;
  174.              background-position: 0 0,15px 15px;
  175.          }
  176.          .qipan4{
  177.              width:600px;
  178.              height:400px;
  179.              background: #eee;
  180.              background-image: linear-gradient(45deg,transparent 75%,#bbb 0),
  181.                                  linear-gradient(45deg,#bbb 25%,transparent 0),
  182.                                  linear-gradient(45deg,transparent 75%,#bbb 0),
  183.                                  linear-gradient(45deg,#bbb 25%,transparent 0);
  184.              background-size: 30px 30px;
  185.              background-position: 0 0,15px 15px,15px 15px,30px 30px;
  186.          }
  187.          .qipan5{
  188.              width:600px;
  189.              height:400px;
  190.              background: #eee;
  191.              background-image:linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,.25) 0),
  192.                                linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,.25) 0);
  193.              background-size: 30px 30px;
  194.              background-position: 0 0,15px 15px;
  195.          }
  196.  
  197.          /*角向渐变*/
  198.          .jiaoxiangjianbian{
  199.              width:400px;
  200.              height:400px;
  201.              border:1px solid red;
  202.              background: conic-gradient(red,yellow,lime,aqua,blue,fuchsia,red);
  203.          }
  204.         /*伪随机背景*/
  205.          .suijibeijing1{
  206.              width:600px;
  207.              height:400px;
  208.              border:1px solid red;
  209.              background:linear-gradient(90deg,#fb3 15%,#655 0,#655 40%,#ab4 0,#ab4 65%,hsl(20,40%,90%) 0);
  210.              background-size: 80px 100%;
  211.          }
  212.          .suijibeijing2{
  213.              width:600px;
  214.              height:400px;
  215.              background:hsl(20,40%,90%);
  216.              border:1px solid red;
  217.              background-image:linear-gradient(90deg,#fb3 10px,transparent 0),
  218.                              linear-gradient(90deg,#ab4 20px,transparent 0),
  219.                              linear-gradient(90deg,#655 20px,transparent 0);
  220.                  /*这里跟上一个的设置不同之处在于，在上边的基础上，把两个同颜色框之间距离最大的那个颜色（通常也是最窄的那个）做成背景颜色，其他渐变
  221.                   但还是看不到伪随机的效果，要达到随机效果，就要让尺寸取最大的最小公倍数*/
  222.              background-size: 80px 100%,60px 100%,40px 100%;
  223.          }
  224.          .suijibeijing3{
  225.              width:600px;
  226.              height:400px;
  227.              background:hsl(20,40%,90%);
  228.              border:1px solid red;
  229.              background-image:linear-gradient(90deg,#fb3 11px,transparent 0),
  230.              linear-gradient(90deg,#ab4 23px,transparent 0),
  231.              linear-gradient(90deg,#655 41px,transparent 0);
  232.              background-size: 41px 100%,63px 100%,79px 100%;
  233.          }
  234.          /*连续的图像边框*/
  235.          .lianxubiankuang{
  236.              width:600px;
  237.              height:400px;
  238.              padding:1em;
  239.              border:1em solid transparent;
  240.              background: linear-gradient(white,white),url("4.jpg");
  241.              background-size: cover;
  242.              background-clip: padding-box,border-box;
  243.              background-origin: border-box;
  244.  
  245.              /* 简写方式：
  246.               padding:1em;
  247.              border:1em solid transparent;
  248.              background:linear-gradient(white,white) padding-box,url("4.jpg") border-box 0 / cover;
  249.              */
  250.          }
  251.  
  252.          /*老式信封*/
  253.          .laoshixinfeng{
  254.              width:600px;
  255.              height:400px;
  256.              padding:1em;
  257.              border:1em solid transparent;
  258.              background: linear-gradient(white,white) padding-box,
  259.                          repeating-linear-gradient(-45deg,red 0,red 12.5%,transparent 0,transparent 25%,#58a 0,#58a 37.5%,transparent 0,transparent 50%) 0 / 5em 5em;
  260.          }
  261.  
  262.          /*蚂蚁行军*/
  263.          @keyframes ants{
  264.              to {
  265.                  background-position: 100%;
  266.              }
  267.          }
  268.          .mayixingjun{
  269.              width:600px;
  270.              height:400px;
  271.              padding:1em;
  272.              border:1px solid transparent;
  273.              background: linear-gradient(white,white) padding-box,
  274.                          repeating-linear-gradient(-45deg,black 0,black 25%,white 0,white 50%)  0 / 0.6em .6em;
  275.              animation:ants  12s linear infinite;
  276.          }
  277.  
  278.          /*平行四边形*/
  279.          .parallelogram{
  280.              width:300px;
  281.              height: 200px;
  282.              transform:skewX(-45deg);
  283.              border:1px solid red;
  284.              background: yellowgreen;
  285.          }
  286.          .parallelogram2{
  287.              width:300px;
  288.              height: 200px;
  289.              position: relative;
  290.          }
  291.          .parallelogram2::before{
  292.              position: absolute;
  293.              top:0;
  294.              left:0;
  295.              bottom:0;
  296.              right:0;
  297.              background: red;
  298.              border:1px solid blue;
  299.              z-index:-1;
  300.              content: '';
  301.              transform: skewX(-45deg);
  302.          }
  303.  
  304.          /*菱形图片*/
  305.          .diamond{
  306.            clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  307.              transition: 1s clip-path;
  308.          }
  309.          .diamond:hover{
  310.              clip-path: polygon(0 0,0 100%,100% 100%, 100% 0);
  311.          }
  312.  
  313.          /*切角*/
  314.          .qiejiao{
  315.          width:600px;
  316.          height:400px;
  317.          background: #58a;
  318.          background: linear-gradient(135deg,transparent 15px,#58a 0) top left,
  319.                      linear-gradient(-135deg,transparent 15px,#58a 0) top right,
  320.                      linear-gradient(45deg,transparent 15px,#58a 0) bottom left,
  321.                      linear-gradient(-45deg,transparent 15px,#58a 0) bottom right;
  322.          background-size: 50% 50%;
  323.          background-repeat:no-repeat;
  324.          }
  325.          /*内凹圆角*/
  326.          .qiejiao2{
  327.              width:200px;
  328.              height: 100px;
  329.              background: #58a;
  330.              background: radial-gradient(circle at top left,transparent 15px ,#58a 0) top left,
  331.              radial-gradient(circle at top right,transparent 15px ,#58a 0) top right,
  332.              radial-gradient(circle at bottom left,transparent 15px ,#58a 0) bottom left, radial-gradient(circle at bottom right,transparent 15px ,#58a 0) bottom right;
  333.              background-size: 50% 50%;
  334.              background-repeat:no-repeat;
  335.          }
  336.          /*小三角形*/
  337.          .xiaosanjiao{
  338.              width:10px;
  339.              height:60px;
  340.              border:1px solid red;
  341.              background: linear-gradient(-45deg,red 0,red 50%,transparent 0,transparent 100%);
  342.          }
  343.          /*梯形标签页*/
  344.          .tixing{
  345.              width:100px;
  346.              height:20px;
  347.              position: relative;
  348.          }
  349.          .tixing::before{
  350.              content: '';
  351.              position: absolute;
  352.              top:0;
  353.              bottom:0;
  354.              right:0;
  355.              left:0;
  356.              z-index:-1;
  357.              /*以底线为基准旋转*/
  358.              transform-origin:bottom;
  359.              transform:scaleY(1.3) perspective(.5em) rotateX(5deg);
  360.              background: mediumvioletred;
  361.          }
  362.          /*饼图*/
  363.          .pie{
  364.              width:400px;
  365.              height:400px;
  366.              border-radius: 50%;
  367.              background: yellowgreen;
  368.              background-image: linear-gradient(to right,transparent 50%,#655 0);
  369.          }
  370.                  /*下面的伪元素旋转可实现0%-50%之间的饼图，要50%-100%之间的饼图需要改变伪元素的颜色，反向旋转*/
  371.          .pie::before{
  372.              content: '';
  373.              display: block;
  374.              margin-left: 50%;
  375.              height:100%;
  376.              border-radius: 0 100% 100% 0 / 50%;
  377.              background-color: inherit;
  378.              transform-origin: left;
  379.              border:1px solid red;
  380.              transform:rotate(.1turn)
  381.          }
  382.          /*0.5-1之间的静态饼图*/
  383.          .pie2{
  384.              width:400px;
  385.              height:400px;
  386.              border-radius: 50%;
  387.              background: yellowgreen;
  388.              background-image: linear-gradient(to right,transparent 50%,#655 0);
  389.          }
  390.  
  391.          .pie2::before{
  392.              content: '';
  393.              display: block;
  394.              margin-left: 50%;
  395.              height:100%;
  396.              border-radius: 0 100% 100% 0 / 50%;
  397.              background-color:#655;
  398.              transform-origin: left;
  399.              border:1px solid red;
  400.              transform:rotate(.1turn)
  401.          }
  402.             /*可以访问的的饼图*/
  403.           .pie3{
  404.               position: relative;
  405.               width:400px;
  406.               height:400px;
  407.               line-height: 400px;
  408.               border-radius: 50%;
  409.               background: yellowgreen;
  410.               background-image: linear-gradient(to right,transparent 50%,#655 0);
  411.               color: transparent;
  412.               text-align: center;
  413.           }
  414.          @keyframes spin{
  415.              to {
  416.                  transform: rotate(.5turn);
  417.              }
  418.          }
  419.          @keyframes bg {
  420.              50% {
  421.                  background: #655;
  422.              }
  423.          }
  424.  
  425.          .pie3::before{
  426.              content: '';
  427.              position: absolute;
  428.              top:0;
  429.              left:50%;
  430.              width:50%;
  431.              height:100%;
  432.              border-radius: 0 100% 100% 0 / 50%;
  433.              background-color: inherit;
  434.              transform-origin: left;
  435.              animation:spin 50s linear infinite,
  436.                        bg 100s step-end infinite;
  437.              animation-play-state: paused;
  438.              animation-delay: inherit;
  439.              border:1px solid red;
  440.          }
  441.  
  442.          /*svg画饼图*/
  443.           .svg circle{
  444.               fill:yellowgreen;
  445.               stroke:#655;
  446.               stroke-width: 32;
  447.               stroke-dasharray: 20 10;
  448.               /*得到比例为38%的扇区*/
  449.           }
  450.  
  451.           .svg2{
  452.               width:100px;
  453.               height:100px;
  454.               transform: rotate(-90deg);
  455.               border-radius: 50%;
  456.           }
  457.          .svg2 circle{
  458.              fill:yellowgreen;
  459.              stroke:#655;
  460.              stroke-width: 32;
  461.              stroke-dasharray: 38 100;
  462.          }
  463.  
  464.          /*单边阴影*/
  465.          .shadow{
  466.              width:600px;
  467.              height:300px;
  468.              border:1px solid blue;
  469.              /*第四个参数是扩张半径，扩大或缩小投影的尺寸*/
  470.              box-shadow: -5px 0px 4px -2px black ;
  471.          }
  472.          /*邻边阴影*/
  473.          .shadow2{
  474.              width:600px;
  475.              height:300px;
  476.              border:1px solid blue;
  477.              box-shadow: 5px 5px 4px -2px black ;
  478.          }
  479.          /*对边阴影*/
  480.          .shadow3{
  481.              width:600px;
  482.              height:300px;
  483.              border:1px solid blue;
  484.              box-shadow: 5px 0px 4px -2px black,-5px 0px 4px -2px black;
  485.          }
  486.  
  487.          /*滤镜染色*/
  488.           .filter{
  489.               width:600px;
  490.               height:400px;
  491.           }
  492.          .filter img{
  493.              filter:sepia(1);
  494.              /*filter:saturate(4);*/
  495.              /*filter:hue-rotate(295deg);*/
  496.          }
  497.          .filter img:hover{
  498.              filter:none;
  499.          }
  500.  
  501.          /*混合模式染色*/
  502.          .mixmodel{
  503.              background: blue;
  504.              width:600px;
  505.              height:400px;
  506.          }
  507.          .mixmodel img{
  508.              mix-blend-mode: luminosity;
  509.          }
  510.          .mixmodel:hover{
  511.              background: transparent;
  512.              /* 还有一种方法不需要img标签，用背景颜色和背景图片  进行  backgrund-blend-mode:luminosity;进行混合*/
  513.          }
  514.  
  515.          /*毛玻璃效果*/
  516.          /*http://play.csssecrets.io/frosted-glass  这里可以看到明显效果*/
  517.          .maoboli{
  518.              width:600px;
  519.              height:400px;
  520.  
  521.          }
  522.          .maoboli > p{
  523.              width:300px;
  524.              height:100px;
  525.  
  526.              margin:20% auto ;
  527.              position: relative;
  528.              background: hsla(0,0%,100%,.3);
  529.              /*overflow: hidden;*/
  530.          }
  531.          .maoboli p::before{
  532.              content: '';
  533.              position: absolute;
  534.              top:0;left:0;
  535.              bottom:0;
  536.              right:0;
  537.              /*background: rgba(255,0,0,0.5);*/
  538.              border:1px solid blue;
  539.              z-index:-1;
  540.              filter:blur(20px);
  541.              margin:-30px;
  542.          }
  543.          .maoboli,.maoboli >p::before{
  544.              background: url("./3.jpg") 0 / cover fixed;
  545.          }
  546.  
  547.          /*折角效果*/
  548.          .zhejiao{
  549.              width:500px;
  550.              height:300px;
  551.              background: #58a;
  552.              background:linear-gradient(to left bottom,transparent 50%,rgba(0,0,0,.4) 0) no-repeat 100% 0 / 2em 2em,
  553.                      linear-gradient(-135deg,transparent 1.5em,#58a 0);
  554.          }
  555.  
  556.          /* 文本换行 */
  557.           .huanhang{
  558.               width:400px;
  559.               height:200px;
  560.               border:1px solid red;
  561.           }
  562.           .huanhang dd,.huanhang dt{
  563.               display: inline;
  564.               border:1px solid blue;
  565.           }
  566.           dd{
  567.               font-weight: bolder;
  568.           }
  569.          .huanhang  dd + dt::before{
  570.              content: '\A';
  571.              white-space: pre;
  572.          }
  573.          .huanhang dd + dd::before{
  574.              content: ', ';
  575.              font-weight: normal;
  576.          }
  577.  
  578.          /* 文本行斑马条纹*/
  579.          .banmatiaowen{
  580.              width:200px;
  581.              height:auto;
  582.              line-height: 1.5;
  583.              border:1px solid green;
  584.              padding:.5em;
  585.              background: beige;
  586.              background: linear-gradient(rgba(0,0,0,.2) 50%,transparent 0);
  587.              background-size: auto 3em;
  588.              background-origin: content-box;
  589.          }
  590.  
  591.          /*发光文字*/
  592.          .faguangwenzi{
  593.             font-size: 50px;
  594.              font-weight: bolder;
  595.              color: #ffc;
  596.              text-shadow:0 0 .1em,0 0 .3em;
  597.              background: #000000;
  598.              /*还可以加模糊滤镜 blur(3px)实现*/
  599.          }
  600.  
  601.          /*svg空心字*/
  602.          h1{
  603.              font:500%/1 Rockwell ,serif;
  604.              background: deeppink;
  605.              color: white;
  606.          }
  607.          h1 text{
  608.              fill:currentColor;
  609.          }
  610.          h1 svg{
  611.              overflow: visible;
  612.          }
  613.          h1 use{
  614.              stroke: black;
  615.              stroke-width: 6;
  616.              stroke-linejoin: round;
  617.          }
  618.  
  619.          /*环形文字*/
  620.          .circular path{
  621.              fill:none;
  622.          }
  623.          .circular{
  624.              width:10em;height:10em;
  625.              margin:3em auto 0;
  626.          }
  627.          .circular svg{
  628.              display: block;
  629.              overflow: visible;
  630.          }
  631.  
  632.          /*扩大可点击区域*/
  633.          /*一种方法是利用透明border，但是会让按钮变大，这时候设置  background-clip:padding-box;，如果按钮要加边框就要用内嵌阴影了  box-shadow：inner*/
  634.          /*还有一种是利用伪元素：透明，用定位拉伸，扩大点击区域*/
  635.          /*边框扩大可点击区域*/
  636.          .borderkuoda{
  637.              width:50px;
  638.              height:50px;
  639.              background: red;
  640.              /*边框扩大点击区域*/
  641.              border:10px solid transparent;
  642.              background-clip: padding-box;
  643.          }
  644.          .borderkuoda:active{
  645.              background: greenyellow;
  646.              background-clip: padding-box;
  647.              /*鼠标光标设置为cursor：not-allowed，提示用户不能选中。*/
  648.              cursor: not-allowed;
  649.          }
  650.  
  651.          /*伪元素扩大可点击区域*/
  652.          .kuodadianji{
  653.              width:50px;
  654.              height:50px;
  655.              background: red;
  656.              position: relative;
  657.          }
  658.          .kuodadianji:active{
  659.              background: blue;
  660.          }
  661.          .kuodadianji::after{
  662.              content: '';
  663.              position: absolute;
  664.              top:-10px;
  665.              left:-10px;
  666.              right:-10px;
  667.              bottom:-10px;
  668.              border:1px solid blue;
  669.          }
  670.  
  671.          /*自定义复选框*/
  672.          /*默认样式*/
  673.         .definefuxuankuang input[type="checkbox"] + label::before{
  674.              content: '\a0'; /* 这个表示不换行空格 */
  675.              display:inline-block;
  676.              vertical-align: .2em;
  677.              width:.8em;
  678.              height:.8em;
  679.              margin-right: .2em;
  680.              border-radius: .2em;
  681.              background: silver;
  682.              text-indent: .15em;
  683.              line-height: .65;
  684.          }
  685.          /*勾选样式*/
  686.          /*通过 focus和disabled 也可以设置  聚焦和禁用状态的样式*/
  687.          .definefuxuankuang  input[type="checkbox"]:checked + label::before{
  688.              content: '\2713';  /*对勾*/
  689.              background: yellowgreen;
  690.          }
  691.          /*隐藏掉原来的复选框*/
  692.  
  693.          .definefuxuankuang  input[type="checkbox"]{
  694.              position: absolute;
  695.              clip:rect(0,0,0,0);
  696.          }
  697.  
  698.        /*开关式按钮*/
  699.          .kaiguan input{
  700.              position: absolute;
  701.              clip:rect(0,0,0,0);
  702.          }
  703.          .kaiguan label{
  704.              display: inline-block;
  705.              padding:.3em .5em;
  706.              background: #ccc;
  707.              background-image: linear-gradient(#ddd,#bbb);
  708.              border:1px solid rgba(0,0,0,.2);
  709.              border-radius: .3em;
  710.              box-shadow: 0 1px white inset;
  711.              text-align: center;
  712.              text-shadow: 0 1px 1px white;
  713.          }
  714.          .kaiguan input:checked + label,.kaiguan input:active + label{
  715.              box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset;
  716.              border-color: rgba(0,0,0,.3);
  717.              background: #bbb;
  718.          }
  719.  
  720.          /*内容决定宽度*/
  721.          figure{
  722.              max-width: 300px;
  723.              max-width:min-content;
  724.              margin:auto;
  725.          }
  726.          figure > img {
  727.              max-width: inherit;  /* 这条不会生效*/
  728.          }
  729.      </style>
  730.  </head>
  731.  <body>
  732.    <div class="box"></div>
  733.    <div class="supports"></div>
  734.  
  735.    <div class="reduceCode">YESmdksmdk!
  736.        <hr></div>
  737.    <div class="box1"></div>
  738.    <div class="borderimg">hahah</div>
  739.    <div class="backgroudpos"></div>
  740.  
  741.    <div class="calc"></div>
  742.  
  743.    <div class="f">
  744.        <div class="s">calc属性计算百分比和像素值</div>
  745.    </div>
  746.  
  747.    <!--4，圆角-->
  748.     <div class="radius">内圆角</div>
  749.  
  750.    <!--条纹背景-->
  751.     <div class="gradient">条纹背景</div>
  752.  
  753.    <!--线性渐变与网格-->
  754.    <div class="wangge">网格色块</div>
  755.    <div class="wangge2">网格线</div>
  756.    <div class="wangge3">蓝图网格</div>
  757.  
  758.    <!--径向渐变和波点-->
  759.    <div class="bodian">波点</div>
  760.    <div class="bodian2">可以作为背景的斜波点</div>
  761.  
  762.    <div class="sanjiaowen">三角纹</div>
  763.    <div class="qipan1">棋盘1</div>
  764.    <div class="qipan2">棋盘2</div>
  765.    <div class="qipan3">棋盘3</div>
  766.    <div class="qipan4">棋盘4</div>
  767.    <div class="qipan5">棋盘5</div>
  768.  
  769.    <!--角向渐变-->
  770.    <div class="jiaoxiangjianbian">角向渐变(没有浏览器支持)</div>
  771.      <!--伪随机背景-->
  772.    <div class="suijibeijing1">伪随机背景1</div>
  773.    <div class="suijibeijing2">伪随机背景2</div>
  774.    <div class="suijibeijing3">伪随机背景3（最终的伪随机效果）</div>
  775.  
  776.    <!--连续图像边框-->
  777.    <div class="lianxubiankuang">连续的图像边框</div>
  778.    <!--老式信封边框-->
  779.    <div class="laoshixinfeng"></div>
  780.  
  781.    <!--蚂蚁行军边框-->
  782.    <div class="mayixingjun">蚂蚁行军边框</div>
  783.  
  784.    <!--平行四边形-->
  785.    <div class="parallelogram">平行四边形(文字也变倾斜了 )</div>
  786.    <div class="parallelogram2">平行四边形(文字不倾斜 )</div>
  787.  
  788.    <!--菱形-->
  789.    <img class="diamond" src="4.jpg"></img>
  790.    <!--切角效果-->
  791.    <div class="qiejiao">切角效果</div>
  792.    <div class="qiejiao2">切角效果2</div>
  793.  
  794.    <!--   画个长条的三角形-->
  795.    <div class="xiaosanjiao">小三角</div>
  796.  
  797.    <!--梯形标签页-->
  798.    <div class="tixing">梯形标签页</div>
  799.    <!--饼图-->
  800.    <div class="pie">饼图0-0.5</div>
  801.    <div class="pie2">饼图0.5-1</div>
  802.    <div class="pie3">40%</div>
  803.    <!--svg 画饼图-->
  804.    <svg class="svg">
  805.        <circle r="30" cx="50" cy="50" />
  806.    </svg>
  807.    <svg class="svg2" viewBox="0 0 32 32">
  808.        <circle r="16" cx="16" cy="16" />
  809.    </svg>
  810.  
  811.    <!--js结合svg画饼-->
  812.    <div class="svg3">20%</div>
  813.  
  814.    <!--单边阴影-->
  815.    <div class="shadow">单边阴影</div>
  816.  
  817.    <!--邻边阴影-->
  818.    <div class="shadow2">邻边阴影</div>
  819.    <!--对边阴影-->
  820.    <div class="shadow3">对边阴影</div>
  821.  
  822.    <div>不规则图形的投影，可以使用滤镜  filter:drop-shadow(2px 2px 10px red);这个参数基本与box-shadow的参数相同。</div>
  823.  
  824.    <!--滤镜染色效果-->
  825.    <div class="filter"><img src="./2.jpg" alt=""></div>
  826.  
  827.    <!-- 混合模式染色-->
  828.    <div class="mixmodel"><img src="./2.jpg" alt=""></div>
  829.  
  830.    <!--毛玻璃效果-->
  831.    <div class="maoboli">
  832.  
  833.       <p> 看文字看文字看文字看文字看文字看文字看文字看文字看文字看文字看文字
  834.        看文字看文字看文字看文字看文字</p>
  835.    </div>
  836.  
  837.    <!--折角效果-->
  838.    <div class="zhejiao"></div>
  839.  
  840.    <!-- 文本换行 -->
  841.    <div>
  842.        <ol class="huanhang">
  843.            <dt>Name</dt>
  844.            <dd>chance</dd>
  845.            <dt>email</dt>
  846.            <dd>123@126.com</dd>
  847.            <dd>456@126.com</dd>
  848.            <dt>address</dt>
  849.            <dd>china</dd>
  850.        </ol>
  851.    </div>
  852.    <!--文本行斑马条纹-->
  853.    <div class="banmatiaowen">
  854.       这是一行文本 <br>
  855.        这是一行文本 <br>
  856.        这是一行文本 <br>
  857.        这是一行文本 <br>
  858.        这是一行文本 <br>
  859.        这是一行文本 <br>
  860.    </div>
  861.  
  862.    <!--改变tab的宽度-->
  863.    <div>代码要写在pre 或code标签中，设置tab的宽度通过  tab-size:4; 设为0表示禁用，浏览器默认设置为8个。</div>
  864.  
  865.  <!--文字发光效果-->
  866.    <div class="faguangwenzi">glow</div>
  867.    <!--svg空心字-->
  868.     <h1>
  869.         <svg width="2em",height="1.2em">
  870.             <use xlink:href="#css" />
  871.             <text id="css" y="1em">css</text>
  872.         </svg>
  873.     </h1>
  874.  
  875.    <!--环形文字-->
  876.    <div class="circular">
  877.        <svg viewBox="0 0 100 100">
  878.            <path d="M 0,50 a 50,50 0 1,1 0,1 z" id="circle"/>
  879.            <text>
  880.                <textpath xlink:href="#circle">
  881.                    circular reasoning works because
  882.                </textpath>
  883.            </text>
  884.        </svg>
  885.    </div>
  886.  
  887.    <!--边框扩大可点击区域-->
  888.    <div class="borderkuoda">
  889.        +
  890.    </div>
  891.    <!--伪元素扩大可点击区域-->
  892.    <div class="kuodadianji">-</div>
  893.    <br>
  894.    <!--自定义单选框，复选框-->
  895.    <div class="definefuxuankuang">
  896.    <input type="checkbox" id="awesome" />
  897.    <label for="awesome">Awesome!!</label>
  898.    </div>
  899.    <!--开关按钮-->
  900.    <div class="kaiguan">
  901.        <input type="checkbox" id="kaiguan" />
  902.        <label for="kaiguan">开关按钮，一般慎用，容易跟普通按钮混淆</label>
  903.    </div>
  904.  
  905.    <!--内容决定宽度-->
  906.    <div class="contentwidth">
  907.        <p>第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行</p>
  908.        <figure>
  909.            <img src="./2.jpg" alt="">
  910.            <figcaption>
  911.                图片介绍 图片介绍 图片介绍 图片介绍 图片介绍 图片介绍 图片介绍 图片介绍 图片介绍 图片介绍 图片介绍
  912.            </figcaption>
  913.        </figure>
  914.        <p>最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行</p>
  915.    </div>
  916.    <script>
  917.  
  918.        var root =  document.documentElement;
  919.        console.log(root);
  920.        if("backgroundColor" in root.style){
  921.            console.log("had")
  922.        }else{
  923.            console.log("not had")
  924.        }
  925.  
  926.        function $$(selector,context){
  927.            context = context || document;
  928.            var elements = context.querySelectorAll(selector);
  929.            return Array.prototype.slice.call(elements);
  930.        }
  931.        //把饼图的百分比文本 转换成 animation-delay
  932.        $$(".pie3").forEach(function(pie){
  933.            var p = parseFloat(pie.textContent);
  934.            pie.style.animationDelay = "-" + p + "s";
  935.        })
  936.  
  937.        //js结合svg画饼
  938.        $$(".svg3").forEach(function(pie){
  939.            var p = parseFloat(pie.textContent);
  940.            var NS = "http://www.w3.org/2000/svg";
  941.            var svg = document.createElementNS(NS,"svg");
  942.            var circle = document.createElementNS(NS,"circle");
  943.            var title = document.createElementNS(NS,"title");
  944.            circle.setAttribute("r",16);
  945.            circle.setAttribute("cx",16);
  946.            circle.setAttribute("cy",16);
  947.            circle.setAttribute("stroke","#655");
  948.            circle.setAttribute("stroke-width",32);
  949.            circle.setAttribute("stroke-dasharray",p+" 100");
  950.            svg.setAttribute("viewBox","0 0 32 32");
  951.            svg.style.borderRadius ="50%";
  952.            circle.style.fill = "yellowgreen";
  953.            title.textContent = pie.textContent;
  954.            pie.textContent = "";
  955.            svg.appendChild(title);
  956.            svg.appendChild(circle);
  957.            pie.appendChild(svg);
  958.        })
  959.    </script>
  960.  </body>
  961.  </html>

《css3揭秘》的效果code的更多相关文章

  1. 《CSS3揭秘》上（边框，投影，渐变，条纹效果，蚂蚁行军）

    最近看了<CSS3揭秘>一书,里面真的是干货满满呀,现将常用到的一些技巧归纳总结,便于日后用到查找.不得不感叹学无止境哦~ 1.边框与背景 半透明边框 .demo{ background- ...

  2. Image Wall - jQuery & CSS3 图片墙效果

    今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...

  3. css3的transition效果和transfor效果

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. css3幻灯片换位效果

    <title>css3幻灯片换位效果</title> <style type="text/css">  .flowGallery {width: ...

  5. 第八十节，CSS3边框图片效果

    CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一．属性解释     CSS3 ...

  6. html+css3实现长方体效果

    网上大都是正方体的效果,由于做一个东西需要,写了一个HTML+css3实现的长方体,有需要的也可以看看.                   2017-07-25         21:30:23 h ...

  7. Css3实现波浪效果3-静态波纹

    一.外框宽度等比例3个椭圆拼合 .container { position: absolute; width: 400px; height: 200px; border: 5px solid rgb( ...

  8. 测试css3的动画效果在display:none的时候不耗费性能

    也许你也有这个疑惑,动画一直在播放,那它不显示出来的时候也一直在播放的话,那是否一直占用资源呢? <!doctype html> <html> <head> < ...

  9. css3写下雨效果

    css3写下雨效果<pre><div class="xiayuxiaoguo"></div></pre> <pre>.x ...

随机推荐

  1. VMware Workstation 12 OpenGL ES版本支持情况与设置

    概述 开始学习Opengl时,发现VMware Workstation虚拟机无法运行Opengl ES2.0的程序.后来,经过查找最终得知,是因为VMware Workstation11及之前的版本对 ...

  2. Mysql工作記錄之修改默認存儲引擎及重設root用戶密碼

    1>修改默認存儲引擎方法 修改配置文件,然後重啟mysql服務: [root@CHW mysql]# cat /etc/my.cnf                            [my ...

  3. [redis] redis 如何删除匹配模式的多个key值

    redis-cli keys "user:*" | grep "user:[0-9]\+$" | xargs redis-cli DEL redis-cli k ...

  4. Windows / Windows Phone 8.1 预留应用名称及应用上传

    最近比较懒好久没有来这里跟大家聊了,WP 8.1 的 preview 发布已经有一阵子了,并且商店支持 8.1 应用也有一段时间了.我就把这篇 8.1 的应用商店预留提交作为 8.1 的一个开始吧. ...

  5. TSQL--查找连续登陆用户

    --========================================== 需求:有一个用户登陆日志表,记录用户每次登陆时间,然后想查找用户按天连续登陆的情况,找出每次连续登陆的最早时间 ...

  6. azkaban作业参数使用介绍

    azkaban作业参数使用介绍 参数传递是调度系统工作流运行时非常重要的一部分,工作流的执行,单个作业的执行,多个工作流之间的依赖执行,历史任务重算,都涉及参数传递和同步. azkaban的工作流中的 ...

  7. Day 4 list 列表的使用方法

     https://www.cnblogs.com/fanison/p/7123532.html s="abcdefg"print("s[3]:",s[3])pr ...

  8. 《Python黑帽子：黑客与渗透测试编程之道》 Web攻击

    Web的套接字函数库:urllib2 一开始以urllib2.py命名脚本,在Sublime Text中运行会出错,纠错后发现是重名了,改过来就好: #!/usr/bin/python #coding ...

  9. django url 路由设置技巧

    Django的url使用方法 利用Django开发站点.能够设计出很优美的url规则,假设url的匹配规则(包括正則表達式)组织得比較好,view的结构就会比較清晰.比較easy维护. 最简单的形式 ...

  10. WebStorm 最新版本激活方式

    WebStorm 最新版本激活方式:今天下载最新版本的WebStorm,发现原来的通过license server激活的方式,网上的已经失效. 找到一种最新的激活码,今天试了下,是有效的.记录下. 注 ...