1.background
//已知宽高,图片自适应盒子大小，铺满
.container{
width: 700px ;
height: 500px ;
background-image: url(./static/03.jpeg);
background-size: 100% 100%;
//background-size: contain; 效果相同
}
//宽高未知,图片自适应盒子大小，铺满
body{
width: 100% ;
height: 100% ;
background-image: url(./static/03.jpeg);
background-size: cover
//cover是响应式的
}
//重复的方式 repeat-x、repeat、no-repeat...
background-repeat: no-repeat;
//背景图像区域：padding-box（默认）、content-box（小）、border-box （大）
background-origin: content-box
//绘制区域 背景颜色
background-clip: padding-box/content-box/border-box
2.渐变
div{
width: 400px;
height: 400px;
/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);
}
/*
-ms- 兼容ie
-webkit- 兼容谷歌和safari
-moz- 兼容火狐
-o- opera
tip:其他属性一样适用
*/
eg: -webkit-linear-gradient(0deg, blue, green 40%, red);
//重复线性渐变
div{
width: 400px;
height: 400px;
/* 一个由下至上的重复线性渐变,
从蓝色开始，40%后变绿，
最后渐变到红色 */
repeating-linear-gradient(0deg, blue, green 40%, red);
}
//径向渐变
radial-gradient()
3.边框&&文本
div{
width: 400px;
height: 400px;
border: 1px solid red;
box-shadow:10px 10px 20px 20px #33ea33;
//阴影,X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色
border-radius:10%;
/*圆角，参数可以是百分比（%）也可以是具体值（px）,
常只使用一个参数，用于形成圆角效果，特殊（50%）：圆；
使用两个参数时，用于形成椭圆效果（对角）；
使用四个参数时，四个方向设置具体数值。
*/
}
p{
width: 200px;
height: 40px;
line-height: 40px;
font-size: 40px;
text-shadow: 10px 40px 1px #eaa123;
//文本阴影，元素在X和Y方向的偏移量、模糊半径和颜色值；
}
//常用的溢出省略效果
p{
overflow: hidden;
//超出部分隐藏
white-space: nowrap;
//文本不换行
text-overflow:ellipsis;
//...省略号效果
}
4.选择器
//属性选择器
<input type="text">
<input type="password">
<input type="submit">
<a href="#" data-test="test">pink</a>
<style>
input[type=text]{
background: red;
}
//指定属性名
a[data-test=test]{
color: pink;
}
//自定义属性亦可
</style>
//伪类
以a标签为例
<a href="#" data-test="test">pink</a>
<style>
a:visited{
color: pink;
}
a:active{
color: red;
}
a:hover{
color: aquamarine;
}
</style>
//伪元素
//content属性必填，可以填 ''; 伪类‘:’,伪元素‘::’
p::before{
content: 'before';
color: red;
}
p::after{
content: 'after';
color: aqua;
}
//子元素
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<style>
ul li:first-child{
color: yellow;
}
//第一个子元素
ul li:last-child{
color:blue
}
//最后一个子元素
ul li:nth-child(3){
color: aquamarine;
}
//第3个子元素
ul li:nth-child(even){
color: green;
}
//偶数子元素
ul li:nth-child(odd){
color: yellow;
}
//奇数子元素
</style>
5.transform
//2D变换
div:hover{
transform: translate(10px,50px);
//平移 x轴10px,Y轴50px
transform: scale(2,5);
//缩放，x轴2倍，y轴5倍；
transform: rotate(30deg);
//旋转30°
transform: skew(30deg,20deg);
//倾斜
}
3D变化（不常用）
/* 父盒子必须设置为3d容器 */
<div class="father">
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
</div>
.father{
margin: 100px;
width: 500px;
height: 500px;
transform-style: preserve-3d;
/* 设置3d效果，必写 */
perspective: 300px;
/* 透视距离,距离越小，3d效果越明显 */
perspective-origin: center center;
/* 展示效果的角度 默认值（center center）*/
}
.box1{
width: 200px;
height: 200px;
background: red;
margin-bottom: 20px;
/* transform: rotateZ(40deg); */
}
/*远大近小*/
.box1:nth-child(1):hover{
transform: translateZ(100px);
}
.box1:nth-child(2):hover{
transform: translateZ(-100px);
}
6.transition 过渡效果
div{
width: 300px;
height: 300px;
margin: 100px;
background-color: #000;
/*
简写
transition: all 3s ease .5s;
*/
/* 过渡属性 设置为all的或所有的变化都会慢慢过渡；指定属性名则只有该属性的变化产生过渡 */
transition-property:background-color;
/* 过渡效果持续时间 */
transition-duration: 3s;
/*
过渡函数
ease（默认）： 慢=>快=>慢
linear:匀速
...
*/
transition-timing-function: ease;
/* 延迟时间 */
transition-delay: .5s;
}
div:hover{
width: 500px;
height: 500px;
/* margin-left: 300px; */
background-color: pink;
}
7.animation 动画
div{
width: 300px;
height: 300px;
background-color: #efa121;
/* animation: changeColor 3s linear 3; */
/* 简写 */
animation-name: move;
/* 动画名 与下方keyframes对应 */
animation-duration: 3s;
/* 动画执行一次的时间 */
animation-timing-function: ease;
/* 速度函数 同：transition */
animation-delay: 1s;
/* 延迟时间 */
animation-iteration-count: 12;
/* 动画重复次数 infinite:无限重复 */
}
/* from相当于0% ; to相当于100% */
@keyframes changeColor {
from{
background-color: pink;
}
to{
background-color: blue;
}
}
@keyframes move {
0%{
transform: translateX(100px);
}
50%{
transform: translateY(100px);
}
100%{
transform: translate(100px,100px);
}
}
/* 鼠标悬浮时动画停止 */
div:hover{
animation-play-state: paused;
}
8.flex布局
常用
1.水平垂直居中
<div class="father">
<div class="son"></div>
</div>
<style>
.father{
width: 600px;
height: 600px;
border: 1px solid pink;
display: flex;
justify-content: center;
align-items: center;
}
.son{
width: 200px;
height: 200px;
background: blue;
}
</style>
2.项目属性之flex
`flex`属性是`flex-grow`, `flex-shrink` 和 `flex-basis`的简写，默认值为`0 1 auto`,既有剩余空间时不放大，无剩余空间时候缩小，分配多余空间之前，项目占据的主轴空间仍为项目本身的大小。
flex:auto => flex:1 1 auto
flex:none => flex:0 0 auto
flex:1 => flex:1 1 0
(等比缩放，最常用,不关心内容多少，均分父容器的空间)
