<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style> .close { /* still bad on picking color */ /* background: orange; */ background-image: URL(http://icon.mobanwang.com/UploadFiles_8971/200805/20080528160821486.png); background-position: center; background-repeat: no-repeat; color: red; /* make a round button */ border-radius: 12px; /* center text */ line-height: 20px; text-align: center; height: 20px; width: 20px; font-size: 18px; padding: 1px; } /* use cross as close button */ .close::before { /* content: "\2716";*/ } /* place the button on top-right */ .close { top: -10px; right: -10px; position: absolute; } .close:hover{ /*background:#000000;*/ background-image: URL(http://icon.mobanwang.com/UploadFiles_8971/200805/20080528160817678.png); } </style> </head> <body> <div style="height: 100px; width: 100px; border: 1px solid black; position: relative;"> <span class="close"></span> </div> </body> </html> [img][/img]
CSS3实现关闭按钮
猜你喜欢
转载自anlinko.iteye.com/blog/2264746
今日推荐
周排行