Review the key points of CSS3
/* background-origin设置图片从哪里开始显示 */
/* 图片从padding左上角开始显示的 */
/* background-origin: padding-box; */
/* 图片从border左上角开始显示 */
/* background-origin: border-box; */
/* 图片从content左上角开始显示 */
background-origin: content-box;
/* background-clip设置图片显示结束的位置 */
/* 图片显示到padding结束 */
/* background-clip: padding-box; */
/* 图片显示到border结束 */
/* background-clip: border-box; */
/* 图片显示到content结束 */
background-clip: content-box;
/* background-size设置背景图大小 */
/* 图片保持高宽比，并纵向铺满 */
/* background-size: cover; */
/* 图片保持高宽比，并横向铺满 */
/* background-size: contain; */
/* 图片显示百分比，横向 纵向 */
/* background-size: 100% 100%; */
/* 图片显示绝对值，第一个参数为横向，第二个为纵向。第二个不传则为auto，auto表示保持高宽比铺开。 */
background-size: 100px 200px;
/* border-radius设置圆角 */
/* 直接设置四个角的值 */
/* border-radius: 50px; */
/* 按顺时针顺序，从左上开始逐一设置圆角 */
border-radius: 10px 20px 30px 40px;
/* 传入2个参数，第一个表示左上和右下，第二个表示左下和右上 */
border-radius: 10px 30px;
/* 传入3个参数，第一个表示左上，第二个表示左下和右上，第三个表示右下 */
border-radius: 10px 20px 30px;
/* 合阴影box-shadow: h-shadow v-shadow blur spread color inset; */
/* 可传入多套参数，显示多重阴影 */
/*
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset 可选。从外层的阴影（开始时）改变阴影内侧阴影
*/
box-shadow: 10px 20px 5px 10px blue inset, 20px 10px 10px 5px red ;
/* border-image: source slice width outset repeat|initial|inherit; 设置边框显示图片 */
/* border-image-source引入边框图片 */
border-image-source: url("border.png");
/* border-image-slice: number|%|fill; */
/* fill表示将引入的图片完整显示在边框四角 */
/* border-image-slice: fill; */
/* border-image-slice 表示边框显示占图片的宽度 */
/* 值为数字时，即要显示的部分实际的宽度，值的数量和分布同margin */
border-image-slice: 360 320 250 300;
/* 值为百分比时，即要显示的部分在原图的百分比，值的数量和分布同margin */
/* border-image-slice: 5% 10% 15% 20%; */
/* border-image-width: px|number|%|auto; 图片的宽度，数字表示比例 */
border-image-width: 10px 20px 30px 40px;
/* border-image-width: 0.5 1 1.5 2; */
/* border-image-width: 10% 20% 30% 40%; */
/* border-image-outset 图片超出边框的距离，支持px和Number，Number表示与border宽度的比例 */
border-image-outset: 10px 20px 30px 40px;
/* border-image-outset: 0 0.5 1 2; */
/* border-image-repeat: stretch|repeat|round|initial|space|inherit;; */
/* 四条边的图片会被拉伸 */
/* border-image-repeat: stretch; */
/* 图片平铺，若图片无法完整显示，则会被裁剪 */
/* border-image-repeat: repeat; */
/* 图片平铺，若图片无法完整显示，则会自动缩放 */
border-image-repeat: round;
/* 图片平铺，若图片无法完整显示，则只显示四个角，其余空白 */
/* border-image-repeat: space; */
/* text-shadow: h-shadow v-shadow blur color; 水平方向，垂直方向，阴影的模糊度，阴影的颜色 */
text-shadow: 5px 5px 5px red;
/* 与p拥有共同父级，并在p之后的所有ul */
p~ul{
background-color: green;
}
/* 与p拥有共同父级，并在p之后的所有ul */
p+ul{
background-color: pink;
}
/* 属性选择器，可参考正则表达式来理解 */
/* 查找a标签中具有href属性，且属性值以P开头的标签 */
a[href^="P"]{
background-color: yellow;
}
/* 查找的a标签中具有href属性，且属性值以mp4结尾的标签 */
a[href$="mp4"]{
background-color: deeppink;
}
/* 查找具有href属性，并且值包含l的标签 */
a[href*="l"]{
background-color: black;
}
/*目标选择器，点击a，找到id为four的p标签，找到后改变背景颜色*/
p:target{
background-color: orangered;
}
/*设置选中的内容后，改变背景颜色*/
p::selection{
background-color: yellow;
}
/* 为非p标签设置属性 */
:not(p) {
border: 1px solid green;
}
div{
width: 200px;
height: 150px;
border: 3px solid red;
}
/*设置第一个文字的样式*/
div:first-letter{
font-size: 30px;
color: yellow;
}
/*设置第一行的文字样式*/
div:first-line{
background-color: green;
}
/* 所有的li中的第一个 */
li:first-child{
background-color: green;
}
/* 最后一个li */
li:last-child{
background-color: yellow;
}
/* 第三个li */
li:nth-child(3){
background-color: orange;
}
/* 倒数第五个li */
li:nth-last-child(5){
background-color: red;
}
/* 选择奇数或偶数标签，odd为奇数，even偶偶数 */
li:nth-child(odd){
background-color: blue;
}
/* background: linear-gradient(direction, color-stop1, color-stop2, ...); 线性渐变 */
/* 渐变方向，每一步渐变的颜色（支持px和%），若两步的颜色相同，则不会渐变，形成单色的环 */
/* background-image: linear-gradient(to right,yellow,green); */
/* background-image: linear-gradient(90deg,yellow,green); */
background-image: linear-gradient(
to left,
/* to left top, */
/* 135deg, */
red 20%,
green 40%,
blue 60%,
pink 80%
);
/* background-image: linear-gradient(
135deg,
red 20%,
green 20%,
green 40%,
blue 40%,
blue 60%,
pink 60%,
pink 80%
); */
}
/* 径向渐变 */
.cls{
width: 300px;
height: 300px;
border: 1px solid red;
margin: 50px auto;
border-radius: 50%;
/* 显示渐变的半径，原点位置，每一步渐变的颜色（支持px和%），若两步的颜色相同，则不会渐变，形成单色的环 */
/* background-image: radial-gradient(100px at center,red,green); */
/* background-image: radial-gradient(100px at 10px 150px,red,green); */
background-image: radial-gradient(
150px at center,
red 10%,
green 10%,
green 20%,
yellow 20%,
yellow 30%,
pink 30%,
pink 40%,
blue 40%,
blue 50%,
orange 50%,
orange 60%,
yellowgreen 60%,
yellowgreen 70%,
Aqua 70%,
Aqua 80%,
Aquamarine 80%,
Aquamarine 90%,
LightPink 90%,
LightPink 100%
);
/* transform 用于设置元素的2d和3d转换，默认为2d */
/* translate(x, y) 元素相对于原来的位置的偏移 */
/* transform: translate(-100px); */
/* transform: translate(100px, 100px); */
/* rotate(angle) 元素相对于z轴旋转 */
/* transform: rotate(60deg); */
/* scale(x[,y]?) 缩小和放大，宽是原来的1.5倍，高是原来0.5倍 */
/* transform: scale(1.5, 0.5); */
/* skew(x-angle,y-angle)相对x轴倾斜30deg，也相对y轴倾斜30deg */
/* transform: skew(30deg, 30deg); */
/* transform 属性的简写形式 */
transform: translate(100px, 100px) rotate(60deg) scale(1.5, 0.5) skew(30deg, 30deg);
.box {
width: 600px;
height: 500px;
background-color: pink;
margin: 100px auto 0;
/* perspective: number|none; 元素与视图的距离，即z=0的距离，为正则在屏幕外部。需要设置在父级元素中。 */
/* perspective不可为负，为负则在屏幕内部，即无法被观察。 */
perspective: 1000px;
}
.cls {
width: 100px;
height: 100px;
background-color: green;
font-size: 36;
line-height: 100px;
text-align: center;
margin: 0 auto;
/* transform-style: flat|preserve-3d; 设置transform属性显示为2d或3d。 */
transform-style: preserve-3d;
}
.box:hover .cls {
/* translate3d(x,y,z) 设置x、y、z轴的偏移，也可分3个轴书写 */
/* transform: translate3d(50px, 100px, 150px); */
/* transform: translateX(100px); */
/* transform: translateY(100px); */
/* transform: translateZ(100px); */
/* rotate3d(x,y,z,angle) 设置x、y、z轴的旋转，也可分3个轴书写 */
/* 参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/rotate3d */
/* transform: rotate3d(1, 0, 0, 90deg); */
/* transform: rotateX(30deg); */
/* transform: rotateY(30deg); */
/* transform: rotateZ(30deg); */
/* scale3d(x,y,z) 设置x、y、z轴的缩放，也可分3个轴书写 */
transform: scale3d(2, 2, 2);
/* transform: scaleX(2); */
/* transform: scaleY(2); */
/* scaleZ参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/scaleZ */
/* transform: scaleZ(2); */
/* skew(x-angle,y-angle)相对x轴倾斜30deg，也相对y轴倾斜30deg */
/* transform: skew(30deg, 30deg); */
/* transform: skewX(30deg); */
/* transform: skewY(30deg); */
}
/* 过渡就是设定元素的开始和结束状态，以及动画的延迟、持续时间、动画速度曲线后，中间过程由浏览器自动处理形成的动画。 */
.cls{
width: 200px;
height: 200px;
background-color: green;
/* transition: property duration timing-function delay; 过渡属性，执行一次性的过渡动画 */
/* transition-property 需要过渡的属性，all表示所有属性 */
transition-property: all;
/* transition-duration 执行动画的时间 */
transition-duration: 2s;
/* transition-timing-function 动画执行速度曲线，支持linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n) */
transition-timing-function: linear;
/* transition-delay 延迟执行动画的时间 */
transition-delay: 1s;
}
.cls:hover{
width: 300px;
height: 300px;
background-color: red;
}
.box{
width: 0;
height: 0;
border-left: 100px dashed red;
border-top: 100px dashed green;
border-right: 100px dashed blue;
border-bottom: 100px dashed orange;
border-radius: 50%;
/* animation: name duration timing-function delay iteration-count direction fill-mode play-state; */
/* animation-name 绑定动画的@keyframes名 */
animation-name: rotate;
/* animation-duration 动画持续时间 */
animation-duration: 1s;
/* animation-timing-function 动画执行速度曲线，支持linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n) */
animation-timing-function: linear;
/* animation-delay 延迟执行动画的时间 */
animation-delay: 0s;
/* animation-iteration-count 动画执行次数，infinite为无限次 */
animation-iteration-count: 3;
/* animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit; */
/* normal 默认值。动画按正常播放。 测试 » */
/* reverse 动画反向播放。 测试 » */
/* alternate 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 */
/* alternate-reverse 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。 */
animation-direction: alternate;
/* animation-fill-mode: none|forwards|backwards|both|initial|inherit; */
/* 设置为forwards时，动画完成后会停留在停止状态不会返回初始状态。 */
/* 参考 https://www.w3cplus.com/css3/css-animation-fill-mode-property.html */
/* none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。 */
/* forwards 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。 */
/* backwards 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）。 */
/* both 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。 */
/* animation-fill-mode: none; */
animation-fill-mode: forwards;
/* animation-fill-mode: backwards; */
/* animation-fill-mode: both; */
/* animation-fill-mode: initial; */
}
.box:hover{
/* 将动画状态修改为暂停 */
animation-play-state: paused;
}
/*定义一个动画集 这个动画的名字就是:rotate*/
@keyframes rotate {
from{
/*开始状态*/
transform: rotateZ(90deg);
}
to{
/*动画的状态*/
transform: rotateZ(180deg);
}
}
@keyframes rotate2 {
0%{
/*开始状态*/
transform: rotateZ(30deg);
}
20%{
/*动画的状态*/
transform: rotateZ(60deg);
}
80%{
/*动画的状态*/
transform: rotateZ(90deg);
}
100%{
transform: rotateZ(120deg);
}
}
.box{
width: 400px;
height: 400px;
border: 1px solid red;
/* 将父级元素设置为display: flex; 则开启弹性布局 */
/* 参考 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html */
display: flex;
/* justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit; */
/* 子元素在主轴（默认为横轴）的方向的对齐的方式的设置 */
/* flex-start 默认值。子元素布局在主轴头部。 */
/* flex-end 子元素布局在主轴尾部。 */
/* center 子元素居中。 */
/* space-between 子元素均匀分布在容器内，子元素之间保持均匀的间距，头尾元素贴紧容器边缘。 */
/* space-around 子元素均匀分布在容器内，子元素之间保持均匀的间距，头尾元素与边缘保持1/2元素间距。 */
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* justify-content: center; */
/* justify-content: space-between; */
/* justify-content: space-around; */
/* align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit; 侧轴对齐方式 */
/* stretch 默认值。子元素在侧轴方向被拉伸到100%。此时不可设置侧轴的长度值，即'min/max-width/height'值。 */
/* center 子元素在侧轴居中显示。 */
/* flex-start 子元素位于侧轴头部。 */
/* flex-end 子元素位于侧轴尾部。 */
/* baseline 以子元素第一行文字的基线对齐。 */
/* align-items: stretch; */
/* align-items: center; */
/* align-items: flex-start; */
/* align-items: flex-end; */
align-items: baseline;
/* flex-flow: flex-direction flex-wrap|initial|inherit; flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 */
/* flex-direction: row|row-reverse|column|column-reverse|initial|inherit; 主轴方向调整 */
/* row 默认值，即主轴为横轴。 */
/* row-reverse 以横轴为主轴，但方向相反，为从右到左。即元素从右到左依次排列。 */
/* column 将主轴改为纵轴。 */
/* column-reverse 以纵轴为主轴，但方向相反，为从下到上。即元素从下到上依次排列。 */
/* flex-direction: row; */
/* flex-direction: row-reverse; */
/* flex-direction: column; */
/* flex-direction: column-reverse; */
/* flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit; */
/* nowrap 默认值。子元素不换行，若子元素宽度之和超过父元素，则自动缩小子元素宽度。 */
/* wrap 保持子元素设定的宽度，若子元素宽度之和超过父元素，则进行换行。 */
/* wrap-reverse 保持子元素设定的宽度，若子元素宽度之和超过父级元素，则进行换行。
元素从父元素的最后一行开始，方向排列，但子元素之间的顺序还是按照主轴方向排列。 */
/* flex-wrap: nowrap; */
flex-wrap: wrap;
/* flex-wrap: wrap-reverse; */
/* align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit; */
/* 该属性在设置了flex-wrap: wrap;时，才起作用。 */
/* stretch 默认值。将元素拉伸，效果与align-items: stretch;相同 */
/* center 将元素都集中在父元素的中部显示，而align-items: center;是将父元素分割成多行，子元素在每行居中显示。 */
/* flex-start 将子元素都集中在父元素头部显示，而align-items: flex-start;是将父元素分割成多行，子元素在每行头部显示。 */
/* flex-end 将子元素都集中在父元素尾部显示，而align-items: flex-end;是将父元素分割成多行，子元素在每行尾部显示。 */
/* space-between 效果同justify-content: space-between;，但是以侧轴排列。
子元素均匀分布在容器内，子元素之间保持均匀的间距，头尾元素贴紧容器边缘。 */
/* space-around 效果同justify-content: space-around;，但是以侧轴排列。
子元素均匀分布在容器内，子元素之间保持均匀的间距，头尾元素与边缘保持1/2元素间距。 */
/* align-content: stretch; */
/* align-content: center; */
/* align-content: flex-start; */
/* align-content: flex-end; */
/* align-content: space-between; */
/* align-content: space-around; */
}
.dv {
width: 100px;
height: 100px;
}
.dv1{
/* align-item: stretch;时，不可设置高度。 */
background-color: red;
}
.box{
width: 400px;
height: 400px;
border: 1px solid red;
display: flex;/*设置为可伸缩的父级元素*/
flex-wrap: wrap;
}
.dv1{
width: 100px;
height: 100px;
background-color: red;
/* 参考 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html */
/* order 定义子元素排列顺序，越小越靠前。 */
/* order: 2; */
/* flex: flex-grow flex-shrink flex-basis|auto|initial|inherit; */
/* flex: 1 1 auto; */
/* flex-grow 规定各元素之间的相对比例，若某元素为2，其他元素为1，则该元素宽度为其他元素2倍。 */
flex-grow: 1;
/* flex-shrink 定义了在元素占满父元素时，若宽度小于元素原始设置宽度时，元素的缩放比例。
为0则表示元素保持设定的宽度（为flex-basis的值，若flex-basis设置为auto，则为元素本身的宽或高）不进行缩小。 */
flex-shrink: 1;
/* flex-basis 定义了各元素在按照flex-grow值分配空间之后，比其他元素多占用的空间值。
例如按flex-grow分配空间之后，每个元素占用100px，而该元素会占用200px。 */
flex-basis: auto;
/* flex-basis: 150px; */
/* align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit; */
/* 设置单个元素的对齐方式，效果同align-items。 */
/* align-self: auto; */
/* align-self: stretch; */
align-self: center;
/* align-self: flex-start; */
/* align-self: flex-end; */
/* align-self: baseline; 在设置了flex-wrap: wrap;时才有效果。 */
/* align-self: baseline; */
}