complex-decoration-style-standards.html (3299B)
1 <!DOCTYPE html> 2 <style type="text/css"> 3 p { 4 margin-left: 11px; 5 padding-left: 11px; 6 } 7 p.dotted span { 8 text-decoration-style: dotted; 9 } 10 p.dashed span { 11 text-decoration-style: dashed; 12 } 13 p.wavy span { 14 text-decoration-style: wavy; 15 } 16 span { 17 text-decoration: underline line-through overline; 18 } 19 p.relative span { 20 position: relative; 21 left: 13px; 22 } 23 24 p.relative2 > span { 25 position: relative; 26 left: 13px; 27 text-decoration: none; 28 } 29 30 p.relative2 span span { 31 position: relative; 32 left: -13px; 33 } 34 35 p.shadow { 36 color: transparent; 37 text-shadow: 1em 0.5em black; 38 } 39 </style> 40 <div style="font-size: 16px;"> 41 <p class="dotted"> 42 <span> </span><span> </span><span> </span><span> </span> 43 </p> 44 <p class="dashed"> 45 <span> </span><span> </span><span> </span><span> </span> 46 </p> 47 <p class="wavy"> 48 <span> </span><span> </span><span> </span><span> </span> 49 </p> 50 <p class="dotted relative"> 51 <span> </span><span> </span><span> </span><span> </span> 52 </p> 53 <p class="dashed relative"> 54 <span> </span><span> </span><span> </span><span> </span> 55 </p> 56 <p class="wavy relative"> 57 <span> </span><span> </span><span> </span><span> </span> 58 </p> 59 <p class="dotted relative2"> 60 <span><span> </span><span> </span><span> </span><span> </span></span> 61 </p> 62 <p class="dashed relative2"> 63 <span><span> </span><span> </span><span> </span><span> </span></span> 64 </p> 65 <p class="wavy relative2"> 66 <span><span> </span><span> </span><span> </span><span> </span></span> 67 </p> 68 <p class="dotted shadow"> 69 <span> </span><span> </span><span> </span><span> </span> 70 </p> 71 <p class="dashed shadow"> 72 <span> </span><span> </span><span> </span><span> </span> 73 </p> 74 <p class="wavy shadow"> 75 <span> </span><span> </span><span> </span><span> </span> 76 </p> 77 </div> 78 <div style="font-size: 32px;"> 79 <p class="dotted"> 80 <span> </span><span> </span><span> </span><span> </span> 81 </p> 82 <p class="dashed"> 83 <span> </span><span> </span><span> </span><span> </span> 84 </p> 85 <p class="wavy"> 86 <span> </span><span> </span><span> </span><span> </span> 87 </p> 88 <p class="dotted relative"> 89 <span> </span><span> </span><span> </span><span> </span> 90 </p> 91 <p class="dashed relative"> 92 <span> </span><span> </span><span> </span><span> </span> 93 </p> 94 <p class="wavy relative"> 95 <span> </span><span> </span><span> </span><span> </span> 96 </p> 97 <p class="dotted relative2"> 98 <span><span> </span><span> </span><span> </span><span> </span></span> 99 </p> 100 <p class="dashed relative2"> 101 <span><span> </span><span> </span><span> </span><span> </span></span> 102 </p> 103 <p class="wavy relative2"> 104 <span><span> </span><span> </span><span> </span><span> </span></span> 105 </p> 106 <p class="dotted shadow"> 107 <span> </span><span> </span><span> </span><span> </span> 108 </p> 109 <p class="dashed shadow"> 110 <span> </span><span> </span><span> </span><span> </span> 111 </p> 112 <p class="wavy shadow"> 113 <span> </span><span> </span><span> </span><span> </span> 114 </p> 115 </div>