2019.7.11整理记录

.box{
500px;
height:500px;
background-image: url(img/58logo.png);
border: 1px solid red;
/*背景图片的平铺*/
background-repeat: repeat-y;
}

盒子会被背景图布满，这时可用background-repeat来设置平铺方向

.logo{
133px;
height: 45px;
background-image: url(img/58_pc_login_sprite.png);
background-position: 0 -201px;
}

图片定位，长宽为所需位置大小，设置了背景图片后

background-position： Xpx  Ypx（一般从图片左上角开始，右为负，下为负）

背景颜色的渐变

background-image: linear-gradient(270deg,red 0%,green 20%,blue 100%);

线性渐变，上为0deg，下为180deg（Xdeg 逗号 颜色 空格 百分数 颜色2 空格 百分数） 
background-image: radial-gradient(50px at center , red 0% ,blue 30% ,green 100%);

径向渐变（半径 空格 at 空格 开始位置，可为center，right等 逗号，颜色 空格 百分数）

边框阴影

.box{
300px;
height: 400px;
/*border: 1px solid black;*/
margin: 20px auto;
box-shadow: 0px 0px 5px #f00 inset;
}

box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow:必须 阴影的水平偏移距离 + 右偏移 - 左偏移
v-shadow:必须 阴影的垂直偏移距离 + 下偏移 -上偏移 
spread：阴影的尺寸
color 阴影的颜色
inset 将默认的外阴影更改为 内阴影

颜色的设置

颜色的设置方式
1、颜色色值英文单词 用的较少
2、16进制表示法 0123456789abcdef
由基础三原色组成
每一个颜色由两个通道组成 两个通道 --- 2个16进制的书组成 -> 2位
#红色两位 绿色两位 蓝色两位 表示的就是颜色
# xy ui op
# xx yy zz 简写 #xyz
#ff0f00 不能简写
#ff0000 红色
#ffffff 白色
#000000 黑色
#eee 灰色
#000 黑色
#aaa 三个通道的颜色色值相等的时候，颜色就是 黑白灰 只是重度不同而已
3、rgb(16*16-1,0,0)
4、rgba(255,0,0,.5)