CSS的其他样式 (background)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .all{
            width: 400px;height: 400px;
            background: white;
            border: 1px solid red;
            /* url("___")寻找图片资源*/
            background-image: url("img/hh.png");
            /* background-
            repeta: 重复 
            no-repeta:不重复
            repeta-x:X轴重复
            repeta-y:Y轴重复 */
            background-repeat: no-repeat;
            /* 先为 X轴距离 再 为 Y轴距离 */
            /* 不仅可以写数值，还可以写方位*/
            background-position: 50% 50%;
            /* 背景图片的大小 */
            background-size: 50% 50%;
            /* 可以清浮动*/
            /* hidden 超出隐藏 */
            /* scroll 滚动 */
            overflow: hidden;
            /* 圆角 */
            /* 左上 右上 右下 左下*/
            border-radius: 50px 40px 30px 20px;
            /* 阴影 */
            /*          X轴偏移    Y轴偏移  模糊范围  模糊范围大小       内部阴影*/
            /*box-shadow:   15px     15px     15px      10px   gray   inset;*/
            transition: all 1s;
            

            font-size: 30px;
            color: pink;
            text-align: center;
            }
            .all:hover{
            /* 伪类 */
            /* hover */
                background-color: yellow;
                box-shadow: 15px 15px 15px 10px red;
            }


            .all div{
                margin-top: 240px;
            }


            /*.zero{
                width: 100px;
                height: 100px;
                background: yellow;
                border-radius: 50px;
            }*/
    </style>

</head>
<body>

    <div class="all">
        <div>
            温婉的王湃湃
        </div>
    </div>
<!--    <div class="zero"></div> -->
    
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容