complex-decoration-style-standards-ref.html 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  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 {
  20. margin-left: 24px;
  21. }
  22. p.shadow span {
  23. position: relative;
  24. left: 1em;
  25. top: 0.5em;
  26. }
  27. </style>
  28. <div style="font-size: 16px;">
  29. <p class="dotted">
  30. <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  31. </p>
  32. <p class="dashed">
  33. <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  34. </p>
  35. <p class="wavy">
  36. <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  37. </p>
  38. <p class="dotted relative">
  39. <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  40. </p>
  41. <p class="dashed relative">
  42. <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  43. </p>
  44. <p class="wavy relative">
  45. <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  46. </p>
  47. <p class="dotted">
  48. <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  49. </p>
  50. <p class="dashed">
  51. <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  52. </p>
  53. <p class="wavy">
  54. <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  55. </p>
  56. <p class="dotted shadow">
  57. <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  58. </p>
  59. <p class="dashed shadow">
  60. <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  61. </p>
  62. <p class="wavy shadow">
  63. <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  64. </p>
  65. </div>
  66. <div style="font-size: 32px;">
  67. <p class="dotted">
  68. <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  69. </p>
  70. <p class="dashed">
  71. <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  72. </p>
  73. <p class="wavy">
  74. <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  75. </p>
  76. <p class="dotted relative">
  77. <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  78. </p>
  79. <p class="dashed relative">
  80. <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  81. </p>
  82. <p class="wavy relative">
  83. <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  84. </p>
  85. <p class="dotted">
  86. <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  87. </p>
  88. <p class="dashed">
  89. <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  90. </p>
  91. <p class="wavy">
  92. <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  93. </p>
  94. <p class="dotted shadow">
  95. <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  96. </p>
  97. <p class="dashed shadow">
  98. <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  99. </p>
  100. <p class="wavy shadow">
  101. <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  102. </p>
  103. </div>