CSS小邮票

最新推荐文章于 2024-06-03 11:23:18 发布

Pink kiki

最新推荐文章于 2024-06-03 11:23:18 发布

阅读量201

点赞数 1

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_46607117/article/details/129583556

版权

效果图如下（右边原图）：

代码部分

<!DOCTYPE html>
<html>
    <head>
        <style>
            body{
                background-color:#525254;
            }
            div{
                position:relative;
                padding:10px;
                width: 300px;
                height: 200px;
                /* border:1px solid green; */
                /* 横着放15个，竖着放10个 */
                background-size:20px 20px;
                /* background-repeat: repeat-y; */
                background-image:radial-gradient(transparent 5px,#FFF 5px);
                /* background-position:0px -10px; */
                background-position: -10px -10px;
                box-sizing: border-box;
            }
            div::before,div::after{
                position:absolute;
                content:'';
                width:40px;
                height:40px;
                line-height: 40px;
                font-weight: bold;
                color:#525254;
                /* border:1px solid yellow; */
            }
            div::before{
                content:'8';
                top:10px;
                right:50px;
                font-size:40px;
                text-align: right;
            }
            div::after{
                content:'分';
                top:10px;
                right:10px;
                font-size:18px;
                text-align: center;
            }
            div img{
                width:100%;
                height:100%;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="./youpiao.jpg" alt="">
        </div>
    </body>
</html>