css（2）

一、背景
背景图定位

background-position:x  y;

取值： 1.以px为单位的数字
2.百分比
3.关键字 先左右 后上下 x:/left/center/right y:/top/center/right
背景图片尺寸

background-size: 500px  500px;

取值 ：
1.以px为单位数字
2.以百分比为单位
3.cover 容器被图片100%覆盖，哪怕图片显示不全，也要把整个容器覆盖住
4.contain 容器把图片100%包含起来，哪怕图片缩小的看不到，也要把整张图片都包含住
背景图固定
将背景固定在网页中的某个位置，一直处于可视化区域中，不会随着滚动条滚动而发生变化，但只显示在原容器中

background-attachment: fixed;

取值：
scroll 默认值
fixed 固定

背景简写方式
在一个属性中，指定多个属性值
background
取值
color url repeat attachment position

二、渐变gradient
1.什么是
多种颜色平缓变化的一种效果
2.颜色的主要因素
色标：一种颜色，以及这种出现的位置
一个渐变至少有两个色标
3.渐变的分类
（1）线性渐变
以直线的方式来填充渐变色
（2）径向渐变
以圆形的方式来填充渐变色
（3）重复渐变
将线性渐变和径向渐变 重复几次实现渐变
4.线性渐变
background-image:
取值：
linear-gradient(angle,color-point1,color-point2,…);
angle：渐变的方向和角度 1.关键字 to top/left/bottom/right 从上到下 从右到左 从上到下 从左到右
角度：单位deg 0deg to top 90deg to right 180deg to bottom 270deg to left
color-point:色标
取值： 颜色 0% 颜色 50px;
5.径向渐变
background-image:
取值：radial-gradient(半径 at 圆心 ,color-point,color-point2,…);
半径：size:以px为单位的数字
圆心position：1 x y 以px为单位的数字 2 x% y% 3 关键字 x: left/center/right y: top/center/bottom
6.重复渐变
（1）重复线性渐变
background-image: repeating-linear-gradient(to bottom, #0f0 0%, #f00 25%);
（2）重复圆形渐变
background-image: repeating-radial-gradient(50px at center center, #d8bbe7 50%, #0b090a 100%);
7.浏览器兼容问题
所有的新版本都支持渐变属性
对于不支持的版本 可以通过添加前缀，让浏览器支持
Chrome：-webkit-
firefox -moz-
ie -ms-
o -o-
如果使用兼容性写法，线性渐变中angle不能写方向，写起始点（没有to）
三、文本格式化
1.字体加粗
font-weight 取值： bold bolder lighter（细一些）;
2.小型大写字母
font-variant:
small-caps;
normal
3.字体属性的简写方式
font: style variant weight size family;
至少有size和family
4.行高
定义一行文字的高度
如果行高大于字体本身的大小，该行的文本将在指定的行高内，呈垂直居中效果显示
line-height:
取值： 1.以px为单位的数字
2.无单位的数字，字体大小的整倍数
多行文字使用行高的时候可能会出现不想要的结果
5.线条的修饰
text-decoration：
取值： overline（上划线），underline（下划线），line-throngh（删除线），none（无线条）
6.首行缩进
text-indent：取值：以px为单位的像素
7.文本阴影
text-shadow：
取值
h-shadow 水平偏移量
v-shadow： 纵轴偏移量
blur 模糊距离
color :颜色