Heim > Artikel > Web-Frontend > 使用css 制作镂空效果_html/css_WEB-ITnose
使用css 制作镂空效果_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:31:391628Durchsuche
今天做一个用户头像上传的页面，在本地选择一个图片，用户调整位置后保存，tx qq 的头像做的不错
设计让我也做一个这样的效果，没见过，于是百度，丫的，竟然没搜到 ，好吧自由自己来，开始想用 canvas做，想想 挺麻烦的，于是灵感一来，想到了！！
代码如下：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <style type="text/css"> html, body { width: 100%; height: 100%; overflow: hidden; } * { margin: 0; padding: 0; } .su { position: relative; width: 300px; height: 300px; border: 1px solid red; margin: 0 auto; overflow: hidden; } .lk { position: absolute; width: 100px; height: 100px; border-radius: 50%; border: 200px solid rgba(0,0,0,0.4); top: 50%; margin-top: -250px; left: 50%; margin-left: -250px; } </style> </head> <body> <div class="su"> <div class="lk"></div> </div> </body></html>
新手，有意见尽管提！ 233333333
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：ejs模板中的四种表达式输出形式_html/css_WEB-ITnoseNächster Artikel：twitter点赞动画详解_html/css_WEB-ITnose