边框阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 400px;
            height: 400px;
            margin: 100px auto;
            border: 1px solid #000;
            /*box-shadow: h-shadow v-shadow blur spread color inset;*/
            /*box-shadow: 10px 10px 10px 10px #000 inset;*/
            box-shadow: 10px 10px  #000 ;
            /*第一个参数水平偏移位*/
            /*第二个参数垂直偏移位*/
            /*第三个参数阴影模糊度*/
            /*第四个参数阴影宽度*/
            /*第五个参数阴影颜色*/
            /*第五个参数将外阴影转换为内阴影*/
            /*第一和第二个和第五个参数不可以不写，第三和第四个参数可以不写，第六个看叙事需要转换为内阴影*/
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

文字阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            font:700 40px '宋体';
            color: darkkhaki;
            text-shadow: 5px 5px 5px #000;
            /*第一个参数水平偏移位*/
            /*第二个参数垂直偏移位*/
            /*第三个参数阴影模糊度*/
            /*第四个参数阴影颜色*/

            /*第三个可以不写*/
    </style>
</head>
<body>
<p>
    何时仗尔看南雪,我与梅花两白头.
</p>
</body>
</html>

background-size相关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            margin: 0 auto;
            list-style: none;
        }

        ul li {
            width: 200px;
            height: 200px;
            box-sizing: border-box;
            border: 1px solid #000;
            float: left;
        }

        ul li:nth-child(1) {
            background: url("http://img2.imgtn.bdimg.com/it/u=19183668,4097390486&fm=26&gp=0.jpg") no-repeat;
            background-size: 100px 100px;
            /*接受具体值*/
        }

        ul li:nth-child(2) {
            background: url("http://img2.imgtn.bdimg.com/it/u=19183668,4097390486&fm=26&gp=0.jpg") no-repeat;
            background-size: 50% 50%;
            /*接受百分比*/
        }

        ul li:nth-child(3) {
            background: url("http://img2.imgtn.bdimg.com/it/u=19183668,4097390486&fm=26&gp=0.jpg") no-repeat;
            background-size: 100px auto;
            /*宽度具体高度等比*/
        }

        ul li:nth-child(4) {
            background: url("http://img2.imgtn.bdimg.com/it/u=19183668,4097390486&fm=26&gp=0.jpg") no-repeat;
            background-size: auto 100px;
            /*宽度等比高度具体*/
        }

        ul li:nth-child(5) {
            background: url("http://img2.imgtn.bdimg.com/it/u=19183668,4097390486&fm=26&gp=0.jpg") no-repeat;
            background-size: cover;
            /*高度和宽度填充满背景*/
        }

        ul li:nth-child(6) {
            background: url("http://img2.imgtn.bdimg.com/it/u=19183668,4097390486&fm=26&gp=0.jpg") no-repeat;
            background-size: contain;
            /*高度或宽度有一边填充满背景*/
        }

        ul li:nth-child(7) {
            background: url("http://img2.imgtn.bdimg.com/it/u=19183668,4097390486&fm=26&gp=0.jpg") no-repeat;
            /*默认*/
        }


    </style>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>