使用css 制作镂空效果_html/css_WEB-ITnose-HTML Tutorial-php.cn

使用css 制作镂空效果_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:31:39

Original

1578 people have browsed it

今天做一个用户头像上传的页面，在本地选择一个图片，用户调整位置后保存，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>

Copy after login

新手，有意见尽管提！ 233333333