使用css 制作镂空效果_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-24 11:31:391629검색
今天做一个用户头像上传的页面，在本地选择一个图片，用户调整位置后保存，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
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.