18 Simple Styles for Horizontal Rules (hr CSS Design)
Code：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset='UTF-8'> 5 <title>Simple Styles for <hr>'s</title> 6 </head> 7 <body> 8 <br> 9 <hr class="style1"> 10 <br> 11 <hr class="style2"> 12 <br> 13 <hr class="style3"> 14 <br> 15 <hr class="style4"> 16 <br> 17 <hr class="style5"> 18 <br> 19 <hr class="style6"> 20 <br> 21 <hr class="style7"> 22 <br> 23 <hr class="style8"> 24 <br> 25 <hr class="style9"> 26 <br> 27 <hr class="style10"> 28 <br> 29 <hr class="style11"> 30 <br> 31 <hr class="style12"> 32 <br> 33 <hr class="style13"> 34 <br> 35 <hr class="style14"> 36 <br> 37 <hr class="style15"> 38 <br> 39 <hr class="style16"> 40 <br> 41 <hr class="style17"> 42 <br> 43 <hr class="style18"> 44 <style> 45 hr{ 46 width: 100%; 47 } 48 49 hr.style1{ 50 border-top: 1px solid #8c8b8b; 51 } 52 53 54 hr.style2 { 55 border-top: 3px double #8c8b8b; 56 } 57 58 hr.style3 { 59 border-top: 1px dashed #8c8b8b; 60 } 61 62 hr.style4 { 63 border-top: 1px dotted #8c8b8b; 64 } 65 66 hr.style5 { 67 background-color: #fff; 68 border-top: 2px dashed #8c8b8b; 69 } 70 71 72 hr.style6 { 73 background-color: #fff; 74 border-top: 2px dotted #8c8b8b; 75 } 76 77 hr.style7 { 78 border-top: 1px solid #8c8b8b; 79 border-bottom: 1px solid #fff; 80 } 81 82 83 hr.style8 { 84 border-top: 1px solid #8c8b8b; 85 border-bottom: 1px solid #fff; 86 } 87 hr.style8:after { 88 content: ''; 89 display: block; 90 margin-top: 2px; 91 border-top: 1px solid #8c8b8b; 92 border-bottom: 1px solid #fff; 93 } 94 95 hr.style9 { 96 border-top: 1px dashed #8c8b8b; 97 border-bottom: 1px dashed #fff; 98 } 99 100 hr.style10 { 101 border-top: 1px dotted #8c8b8b; 102 border-bottom: 1px dotted #fff; 103 } 104 105 106 hr.style11 { 107 height: 6px; 108 background: url(http://ibrahimjabbari.com/english/images/hr-11.png) repeat-x 0 0; 109 border: 0; 110 } 111 112 113 hr.style12 { 114 height: 6px; 115 background: url(http://ibrahimjabbari.com/english/images/hr-12.png) repeat-x 0 0; 116 border: 0; 117 } 118 119 hr.style13 { 120 height: 10px; 121 border: 0; 122 box-shadow: 0 10px 10px -10px #8c8b8b inset; 123 } 124 125 126 hr.style14 { 127 border: 0; 128 height: 1px; 129 background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 130 background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 131 background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 132 background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 133 } 134 135 136 hr.style15 { 137 border-top: 4px double #8c8b8b; 138 text-align: center; 139 } 140 hr.style15:after { 141 content: ' 02665'; 142 display: inline-block; 143 position: relative; 144 top: -15px; 145 padding: 0 10px; 146 background: #f0f0f0; 147 color: #8c8b8b; 148 font-size: 18px; 149 } 150 151 hr.style16 { 152 border-top: 1px dashed #8c8b8b; 153 } 154 hr.style16:after { 155 content: ' 02702'; 156 display: inline-block; 157 position: relative; 158 top: -12px; 159 left: 40px; 160 padding: 0 3px; 161 background: #f0f0f0; 162 color: #8c8b8b; 163 font-size: 18px; 164 } 165 166 167 hr.style17 { 168 border-top: 1px solid #8c8b8b; 169 text-align: center; 170 } 171 hr.style17:after { 172 content: '§'; 173 display: inline-block; 174 position: relative; 175 top: -14px; 176 padding: 0 10px; 177 background: #f0f0f0; 178 color: #8c8b8b; 179 font-size: 18px; 180 -webkit-transform: rotate(60deg); 181 -moz-transform: rotate(60deg); 182 transform: rotate(60deg); 183 } 184 185 hr.style18 { 186 height: 30px; 187 border-style: solid; 188 border-color: #8c8b8b; 189 border-width: 1px 0 0 0; 190 border-radius: 20px; 191 } 192 hr.style18:before { 193 display: block; 194 content: ""; 195 height: 30px; 196 margin-top: -31px; 197 border-style: solid; 198 border-color: #8c8b8b; 199 border-width: 0 0 1px 0; 200 border-radius: 20px; 201 } 202 </style> 203 </body> 204 </html>
样式：