CSS的其他样式 (background)

作者: 爱新觉罗狗子 | 来源:发表于2016-11-23 20:31 被阅读0次

CSS的其他样式 (background)
css笔记
CSS的引入方式
CSS样式-背景(background)
CSS中的背景设置
CSS样式
1.CSS background属性与background-im
day04
css 每天一练之一个标签实现三行菜单样式
css3-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>