美文网首页
手机端一像素描边

手机端一像素描边

作者: _conquer_ | 来源:发表于2017-05-22 15:09 被阅读0次

html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width,target-densitydpi=medium-dpi,initial-scale=1, maximum-scale=1">
        <title></title>
        <style>
            html{
                font-size: 100px;
            }
            span {
                display: block;
                color: #15ae67;
                font-size: 0.13rem;
                position: relative;
                padding: 0.01rem 0.03rem 0 0.03rem;
                margin: 0 0.1rem 0.15rem 0;
                width: 20%;
                text-align: center;
            }   
            span:after {
                content: '';
                display: block;
                width: 200%;
                height: 200%;
                border: 1px solid #15ae67;
                border-radius: 5px;
                -webkit-transform-origin: 0 0;
                 transform-origin: 0 0; 
                -webkit-transform: scale(0.5);
                transform: scale(0.5);
                position: absolute;
                top: 0;
                left: 0;
            }
            
            #box{
                position: relative;
                font-size: .16rem;
                line-height: .2rem;
                padding-bottom: .04rem;
            }
            #box:after{
                content: '';
                display: block;
                width: 200%;
                height: .01rem;
                border-bottom: 1px solid #15ae67;
                -webkit-transform-origin: 0 100%;
                 transform-origin: 0 100%; 
                -webkit-transform: scale(0.5);
                transform: scale(0.5);
                position: absolute;
                bottom: 0;
                left: 0;
            }
        </style>
    </head>

    <body>
        <span>一像素描边</span>
        <span>一像素描边</span>
        <span>一像素描边</span>
        <span>一像素描边</span>
        <span>一像素描边</span>
        <div id="box">
            一像素描边手机
        </div>
    </body>

</html>

实现效果图

相关文章

网友评论

      本文标题:手机端一像素描边

      本文链接:https://www.haomeiwen.com/subject/vsabxxtx.html