css 边框 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>CSS3 边框</title>
  6     <style>
  7         body, ul, li, dl, dt, dd, h1, h2, h3, h4, h5 {
  8             margin: 0;
  9             padding: 0;
 10         }
 11 
 12         body {
 13             background-color: #F7F7F7;
 14         }
 15 
 16         .wrapper {
 17             width: 1000px;
 18             margin: 0 auto;
 19             padding: 20px;
 20             box-sizing: border-box;
 21         }
 22 
 23         header {
 24             padding: 20px 0;
 25             margin-bottom: 20px;
 26             text-align: center;
 27         }
 28 
 29         header h3 {
 30             line-height: 1;
 31             font-weight: normal;
 32             font-size: 28px;
 33         }
 34 
 35         .main {
 36             /*overflow: hidden;*/
 37         }
 38 
 39         .main:after {
 40             content: '';
 41             clear: both;
 42             display: block;
 43         }
 44 
 45         .main .item {
 46             width: 210px;
 47             height: 210px;
 48             margin: 0 30px 30px 0;
 49             display: flex;
 50             position: relative;
 51             background-color: #FFF;
 52             float: left;
 53             box-shadow: 2px 2px 5px #CCC;
 54         }
 55         
 56         .main .item:after {
 57             content: attr(data-brief);
 58             display: block;
 59             width: 100%;
 60             height: 100%;
 61             text-align: center;
 62             line-height: 210px;
 63             position: absolute;
 64             top: 0;
 65             left: 0;
 66             color: #FFF;
 67             font-family: '微软雅黑';
 68             font-size: 18px;
 69             background-color: rgba(170, 170, 170, 0);
 70             z-index: -1;
 71             transition: all 0.3s ease-in;
 72         }
 73 
 74         .main .item:hover:after {
 75             background-color: rgba(170, 170, 170, 0.6);
 76             z-index: 100;
 77         }
 78 
 79         .main .item:nth-child(4n) {
 80             margin-right: 0;
 81         }
 82 
 83         /*.main .item:nth-last-child(-n+5) {
 84             margin-bottom: 0;
 85         }*/
 86 
 87         /* 以上是骨架样式 */
 88         /* 1、2、3、4 顺时针 */
 89         .border-radius {
 90             width: 180px;
 91             height: 180px;
 92             margin: auto;
 93             border: 1px solid red;
 94             /*border-radius: 50% 30% 20%;*/
 95         }
 96         
 97         .square {
 98             border-radius: 0;
 99         }
100         
101         /*拱形*/
102         .item:nth-child(1) .border-radius {
103             border-radius: 90px;
104         }
105 
106         /*拱形*/
107         .item:nth-child(2) .border-radius {
108             border-radius: 90px 90px 0 0;
109         }
110 
111         /*半圆*/
112         .item:nth-child(3) .border-radius {
113             height: 90px;
114             border-radius: 90px 90px 0 0;
115         }
116 
117         /*左上角*/
118         .item:nth-child(4) .border-radius {
119             /*height: 90px;*/
120             border-radius: 90px 0 0 0;
121         }
122 
123         /*四分之一圆*/
124         .item:nth-child(5) .border-radius {
125             width: 90px;
126             height: 90px;
127             border-radius: 90px 0 0 0;
128         }
129 
130         /*横着的椭圆*/
131         .item:nth-child(6) .border-radius {
132             height: 90px;
133             /*border-radius: 50%;*/
134             border-radius: 90px 90px 90px 90px / 45px 45px 45px 45px;
135             /*border-radius: 45px / 90px;*/
136         }
137 
138         /*竖着的椭圆*/
139         .item:nth-child(7) .border-radius {
140             width: 90px;
141             border-radius: 45px 45px 45px 45px / 90px 90px 90px 90px;
142         }
143 
144         /*半个横着的椭圆*/
145         .item:nth-child(8) .border-radius {
146             height: 45px;
147             border-radius: 90px 90px 0 0 / 45px 45px 0 0;
148         }
149 
150         /*半个竖着的椭圆*/
151         .item:nth-child(9) .border-radius {
152             width: 45px;
153             border-radius: 45px  0 0 45px / 90px 0 0 90px;
154         }
155 
156         /*四分之一竖着的椭圆*/
157         .item:nth-child(10) .border-radius {
158             width: 45px;
159             height: 90px;
160             border-radius: 45px 0 0 0 / 90px 0 0 0;
161         }
162 
163         /*饼环*/
164         .item:nth-child(11) .border-radius {
165             width: 40px;
166             height: 40px;
167             border: 70px solid red;
168             border-radius: 90px;
169         }
170 
171         /*圆饼*/
172         .item:nth-child(12) .border-radius {
173             width: 40px;
174             height: 40px;
175             border: 70px solid red;
176             border-radius: 60px;
177         }
178 
179         /*左上角圆饼*/
180         .item:nth-child(13) .border-radius {
181             width: 60px;
182             height: 60px;
183             border: 60px solid red;
184             border-radius: 90px 0 0 0;
185         }
186 
187         /*对角圆饼*/
188         .item:nth-child(14) .border-radius {
189             width: 60px;
190             height: 60px;
191             border: 60px solid red;
192             border-radius: 90px 0 90px 0;
193         }
194 
195         /*四边不同色*/
196         .item:nth-child(15) .border-radius {
197             width: 0px;
198             height: 0px;
199             border-width: 90px;
200             border-style: solid;
201             border-color: red green yellow blue;
202         }
203 
204         /*右透明色*/
205         .item:nth-child(16) .border-radius {
206             width: 0px;
207             height: 0px;
208             border-width: 90px;
209             border-style: solid;
210             border-color: red green yellow blue;
211             border-right-color: transparent;
212         }
213 
214         /*圆右透明色*/
215         .item:nth-child(17) .border-radius {
216             width: 0px;
217             height: 0px;
218             border-width: 90px;
219             border-style: solid;
220             border-color: red;
221             border-right-color: transparent;
222             border-radius: 90px;
223         }
224 
225         /*圆右红透明色*/
226         .item:nth-child(18) .border-radius {
227             width: 0px;
228             height: 0px;
229             border-width: 90px;
230             border-style: solid;
231             border-color: transparent;
232             border-right-color: red;
233             border-radius: 90px;
234         }
235 
236         /*阴阳图前世*/
237         .item:nth-child(19) .border-radius {
238             width: 180px;
239             height: 0px;
240             border-top-width: 90px;
241             border-bottom-width: 90px;
242             border-style: solid;
243             border-top-color: red;
244             border-bottom-color: green;
245             /*border-right-color: red;*/
246             border-radius: 90px;
247         }
248 
249         /*阴阳图前世2*/
250         .item:nth-child(20) .border-radius {
251             width: 180px;
252             height: 90px;
253             border-bottom-width: 90px;
254             border-style: solid;
255             border-bottom-color: green;
256             background-color: red;
257             /*border-right-color: red;*/
258             border-radius: 90px;
259         }
260 
261         /*阴阳图今生*/
262         .item:nth-child(21) .border-radius {
263             width: 180px;
264             height: 90px;
265             border-bottom-width: 90px;
266             border-style: solid;
267             border-bottom-color: green;
268             background-color: red;
269             border-radius: 90px;
270             position: relative;
271         }
272 
273         .item:nth-child(21) .border-radius::after,
274         .item:nth-child(21) .border-radius::before {
275             content: '';
276             position: absolute;
277             top: 50%;
278             width: 20px;
279             height: 20px;
280             /*margin: -10px 0 0 0;*/
281             border-width: 35px;
282             border-style: solid;
283             border-radius: 45px;
284         }
285 
286         /*左阴阳*/
287         .item:nth-child(21) .border-radius::after {
288             background-color: red;
289             border-color: green;
290         }
291 
292         /*右阴阳*/
293         .item:nth-child(21) .border-radius::before {
294             background-color: green;
295             border-color: red;
296             right: 0;
297         }
298 
299         /*右阴阳*/
300         .item:nth-child(22) .border-radius {
301             width: 180px;
302             height: 90px;
303             border-bottom-width: 90px;
304             border-bottom-color: green;
305             border-bottom-style: solid;
306             background-color: red;
307             border-radius: 90px;
308             position: relative;
309         }
310 
311         .item:nth-child(22) .border-radius::after,
312         .item:nth-child(22) .border-radius::before {
313             content: '';
314             position: absolute;
315             top: 50%;
316             width: 20px;
317             height: 20px;
318             border-width: 35px;
319             border-style: solid;
320             border-radius: 45px;
321         }
322 
323         .item:nth-child(22) .border-radius::before {
324             border-color: green;
325             background-color: red;
326         }
327 
328         .item:nth-child(22) .border-radius::after {
329             right: 0;
330             border-color: red;
331             background-color: green;
332         }
333 
334         /*消息框*/
335         .item:nth-child(23) .border-radius {
336             width: 160px;
337             height: 80px;
338             background-color: red;
339             border-radius: 6px;
340             position: relative;
341         }
342 
343         .item:nth-child(23) .border-radius::after {
344             content: '';
345             width: 0;
346             height: 0;
347             border-width: 10px;
348             border-style: solid;
349             border-color: transparent;
350             border-right-color: red;
351             position: absolute;
352             top: 16px;
353             left: -20px;
354         }
355 
356         /*奇怪的图形*/
357         .item:nth-child(24) .border-radius {
358             width: 40px;
359             height: 40px;
360             border-width: 45px 0 45px 70px;
361             border-style: solid;
362             border-radius: 0 0 60px 0;
363             border-color: red;
364         }
365 
366         /*奇怪的图形2*/
367         .item:nth-child(25) .border-radius {
368             width: 100px;
369             height: 40px;
370             border-width: 45px 20px 45px 70px;
371             border-style: solid;
372             border-radius: 60px;
373             border-color: red;
374         }
375 
376         /*QQ对话*/
377         .item:nth-child(26) .border-radius {
378             width: 160px;
379             height: 80px;
380             background-color: red;
381             border-radius: 6px;
382             position: relative;
383         }
384 
385         .item:nth-child(26) .border-radius::after {
386             content: '';
387             position: absolute;
388             top: 0;
389             right: -20px;
390             width: 30px;
391             height: 30px;
392             border-width: 0 0 30px 30px;
393             border-style: solid;
394             border-bottom-color: red;
395             border-left-color: transparent;
396             border-radius: 0 0 60px 0;
397         }
398 
399         /*圆角的百分比设置 */
400         .item:nth-child(27) .border-radius {
401             width: 180px;
402             /*height: 180px;*/
403             height: 90px;
404             border-radius: 50%;
405             border-radius: 90px/45px;
406 
407             /*百分比是按横竖两个对应的方向的长度进行计算*/
408         }
409 
410     </style>
411 </head>
412 <body>
413     <div class="wrapper">
414         <header>
415             <h3>CSS3 边框圆角</h3>
416         </header>
417         <div class="main">
418             <div class="item" data-brief="整圆">
419                 <div class="border-radius"></div>
420             </div>
421             <div class="item" data-brief="拱形">
422                 <div class="border-radius"></div>
423             </div>
424             <div class="item" data-brief="半圆">
425                 <div class="border-radius"></div>
426             </div>
427             <div class="item" data-brief="左上角">
428                 <div class="border-radius"></div>
429             </div>
430             <div class="item" data-brief="四分之一圆">
431                 <div class="border-radius"></div>
432             </div>
433             <div class="item" data-brief="横着的椭圆">
434                 <div class="border-radius"></div>
435             </div>
436             <div class="item" data-brief="竖着的椭圆">
437                 <div class="border-radius"></div>
438             </div>
439             <div class="item" data-brief="半个横着的椭圆">
440                 <div class="border-radius"></div>
441             </div>
442             <div class="item" data-brief="半个竖着的椭圆">
443                 <div class="border-radius"></div>
444             </div>
445             <div class="item" data-brief="四分之一竖着的椭圆">
446                 <div class="border-radius"></div>
447             </div>
448             <div class="item" data-brief="饼环">
449                 <div class="border-radius"></div>
450             </div>
451             <div class="item" data-brief="圆饼">
452                 <div class="border-radius"></div>
453             </div>
454             <div class="item" data-brief="左上角圆饼">
455                 <div class="border-radius"></div>
456             </div>
457             <div class="item" data-brief="对角圆饼">
458                 <div class="border-radius"></div>
459             </div>
460             <div class="item" data-brief="四边不同色">
461                 <div class="border-radius"></div>
462             </div>
463             <div class="item" data-brief="右透明色">
464                 <div class="border-radius"></div>
465             </div>
466             <div class="item" data-brief="圆右透明色">
467                 <div class="border-radius"></div>
468             </div>
469             <div class="item" data-brief="圆右红透明色">
470                 <div class="border-radius"></div>
471             </div>
472             <div class="item" data-brief="阴阳图前世">
473                 <div class="border-radius"></div>
474             </div>
475             <div class="item" data-brief="阴阳图前世2">
476                 <div class="border-radius"></div>
477             </div>
478             <div class="item" data-brief="阴阳图今生">
479                 <div class="border-radius"></div>
480             </div>
481             <div class="item" data-brief="阴阳图今生2">
482                 <div class="border-radius"></div>
483             </div>
484             <div class="item" data-brief="消息框">
485                 <div class="border-radius"></div>
486             </div>
487             <div class="item" data-brief="奇怪的图形">
488                 <div class="border-radius"></div>
489             </div>
490             <div class="item" data-brief="奇怪的图形2">
491                 <div class="border-radius"></div>
492             </div>
493             <div class="item" data-brief="QQ对话">
494                 <div class="border-radius"></div>
495             </div>
496             <div class="item" data-brief="圆角百分比">
497                 <div class="border-radius"></div>
498             </div>
499         </div>
500     </div>
501 </body>
502 </html>

 

posted @ 2017-05-08 18:59  KSnow  阅读(237)  评论(0)  编辑  收藏  举报