1、美丽的世界

项目初始化css

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
html, body, #app {
	height: 100%;
	
}
body {
	min-height: 900px;
}

1、背景图片

background-image: url("../../assets/homeImages/container-two-left.png");
background-repeat: no-repeat; // 不平铺
background-size: cover; // 拉伸占满整个容器
background-position: center; // 居中显示

• background-color 指定要使用的背景颜色
• background-position 指定背景图像的位置
• background-size 指定背景图片的大小
• background-repeat 指定如何重复背景图像
• background-origin 指定背景图像的定位区域
• background-clip 指定背景图像的绘画区域
• background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动
• background-image 指定要使用的一个或多个背景图像

background 渐变

// 对角线渐变
background:linear-gradient(red,yellow);
background:linear-gradient(to top right,red,yellow);
background: linear-gradient(to top right, red 0%, yellow 25%, pink 100%);
// 中心发散
background: radial-gradient(circle, red, yellow);

background-size

background-size: contain; // 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。
background-size: cover; // 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。(图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。)
background-size: 100% auto; // 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
background-size: auto 100%; // 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

2、动画使用例子

// 一个div盒子
.container {
    animation: test 15s linear infinite;
}

// 定义的动画
@keyframes test {
    from {
    transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
    transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes test {
    0% {
    transform: translate(-50%, -50%) rotate(0deg);
    }

    50% {
    transform: translate(-50%, -50%) rotate(180deg);
    }

    100% {
    transform: translate(-50%, -50%) rotate(360deg);
    }
}

3、div撑满整个屏幕

1、通过设置html,body的宽高来让div充满屏幕

        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        .container {
            width: 100%;
            height: 100%;
            border: 1px solid red;
            position: absolute;
            background: green;
            box-sizing: border-box;
        }

2、绝对定位

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 100%;
            height: 100%;
            border: 1px solid red;
            position: absolute;
            background: greenyellow;
            box-sizing: border-box;
        }
    </style>

4、美丽的阴影

• 传送门：www.joshwcomeau.com/css/designi…

box-shadow:
      0 1px 1px hsl(0deg 0% 0% / 0.075),
      0 2px 2px hsl(0deg 0% 0% / 0.075),
      0 4px 4px hsl(0deg 0% 0% / 0.075),
      0 8px 8px hsl(0deg 0% 0% / 0.075),
      0 16px 16px hsl(0deg 0% 0% / 0.075)
    ;

.with-box-shadow {
  box-shadow:
    1px 2px 4px hsl(220deg 60% 50%);
}

.with-drop-shadow {
  filter: drop-shadow(
    1px 2px 4px hsl(220deg 60% 50%)
  );
}