学习第7天——关于背景的设定

1.背景颜色

<style>
        .box {
            width: 300px;
            height: 300px;
            background-color: blueviolet;
        }
    </style>

可以简单的设置背景，包括颜色，大小和坐标。

2.背景图片

<style>
    .box {
        width: 3000px;
        height: 3000px;
        border: 10px dotted red;
        left: 1500px;
        top: 100px;
        background-image: url(image/19b41ee997b3532e.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 2000px;
        background-color: #00ff19;
        position: absolute;
    }
    .box1 {
        width: 1000px;
        height: 1000px;
        background-color: rgba(245, 232, 94, 0.84);
        position: absolute;
        left: 800px;
        top: 800px;
    }
</style>

可以设置背景图片的大小颜色和方位坐标，还可以选择填充背景的方式。

3‘边框属性

<style>
        .box {
            width: 100px;
            height: 100px;
            background: #cccccc;
                }
    </style>

可以自定义一个基础边框，并编辑其元素，包括颜色大小和坐标

3.内边距和外边距

<style>
        .box {
            width: 200px;
            /*height: 100px;*/
            border: 1px solid black;
            /*左内边距*/
            /*padding-left: 20px;
            padding-top: 20px;
            padding-right: 20px;
            padding-bottom: 20px;*/
            /*padding: 10px 20px 30px 50px;*/
            /*padding: 10px 30px 50px;*/
            /*padding: 10px 50px;*/
            padding: 10px;
        }
    </style>

<style>
        .box {
            width: 300px;
            height: 200px;
            border: 1px solid gray;
        }
        .inner {
            width: 200px;
            height: 100px;
            border: 1px solid blueviolet;
            /*margin-left: 20px;
            margin-top: 20px;*/
            margin: 20px 50px 30px;
        }
    </style>

可以设置边框元素中的属性。

4.浮动

<style>
        ul,li {
            padding: 0;
            margin: 0;
        }
        li {
            list-style: none;
            width: 60px;
            height: 25px;
            float: left;
        }
        .clear {
            /*清除浮动*/
            clear: both;
        }
    </style>

可以改变文字的位置方向

5.阴影

<style>
        .box {
            width: 100px;
            height: 100px;
            background: deeppink;
            box-shadow: 50px 20px 2px blueviolet;
        }
    </style>

顾名思义可以为图片设置一个阴影并自定义其阴影属性。

6.圆角<style>
        .box {
            /*width: 100px;
            height: 100px;*/
            width: 120px;
            height: 160px;
            background: blueviolet;
            /*border-radius: 10px;*/
            /*border-radius: 50%;*//*圆*/
            /*border-radius: 10px 20px 30px 40px;*/
            /*border-radius: 10px 30px 60px;*/
            /*border-radius:20px 40px;*/
            /*border-radius:100px/40px;*/
            border-radius: 60px 60px 60px 60px/100px 100px 60px 60px;
        }
    </style>

可以为图像设置弧度从而达到圆形甚至其他形状的不规则图形。