Mark标记功能的实现（像手工标记的一样）

今天看到一个网站的标记功能，觉得很不错，先记录一下，emm

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
     <style>
         mark {
             position: relative;
             display: inline-block;
             z-index: 2
         }
         mark:before,mark:after {
             content: ' ';
             display: block;
             height: 90%;
             width: 100%;
             margin-left: -3px;
             margin-right: -3px;
             position: absolute;
             z-index: -1
         }
         mark.highlight {
             background-color: rgba(179,213,255,0.4);
             border-top-right-radius: 28%;
             border-bottom-right-radius: 60%;
             border-bottom-left-radius: 90%;
             border-top-left-radius: 19%
         }
         mark.highlight:before {
             height: .7em;
             top: 5px;
             left: -1px;
             background: rgba(179,213,255,0.5);
             border-top-right-radius: 30%;
             border-bottom-right-radius: 17%;
             border-bottom-left-radius: 24%;
             border-top-left-radius: 16%;
             transform: rotate(1deg)
         }
         mark.highlight:after {
             height: .8em;
             top: .3em;
             right: -4px;
             background: rgba(179,213,255,0.8);
             border-top-right-radius: 20%;
             border-bottom-right-radius: 90%;
             border-bottom-left-radius: 28%;
             transform: rotate(-1deg)
         }
         mark.underline {
             background-color: transparent
         }

         mark.underline:before {
             height: .12em;
             top: .98em;
             left: 6px;
             background: rgba(179,213,255,0.8);
             transform: rotate(-2deg)
         }
         mark.underline:after {
             height: .18em;
             top: 1em;
             left: -2px;
             background: rgba(179,213,255,0.8);
             border-bottom-left-radius: 6%;
             border-bottom-right-radius: 16%;
             border-top-left-radius: 90%;
             transform: rotate(-1deg)
         }
     </style>
 </head>
 <body>
     <h2>
         Emma HQ:
         <mark class="highlight">Command central</mark>
         for your marketing
     </h2>
     <h1>
         Email marketing that works for
         <mark class="underline">you</mark>
     </h1>
 </body>
 </html>