CSS基础知识（六）

z-index堆叠顺序

• 一旦修改了元素的定位方式，则元素可能会发生堆叠
• 可以使用z-index属性来控制元素框出现的重叠顺序
• z-index仅能在定位的元素上生效
• z-index属性：
  -值为数值，数值越大表示堆叠顺序越高，即离用户越近
  -可以设置为负值，表示离用户更远，一般不要设置
  -z-index仅在定位元素上生效

居中总结

1. 内容水平居中text-align:center
2. 一行文字垂直居中line-heighe=height
3. 盒子水平居中margin: 0 auto
4. 子元素于父元素居中

.parent
{display:table-cell;
vertical-align:middle;}
.child{
margin:0 auto;
}

.parnet{
display：flex;
align-item:center;
justify-content:center;}

圆角

border-radius:value(四个角)

border-radius:value value(左上和右下)

border-radius:value value value value(左上 右上 右下 左下）

阴影

box-shadow

值	描述
h-shadow	必须。水平阴影的位置。允许负值
v-shadow	必须。垂直阴影的位置。允许负值
blur	可选，模糊距离
spread	可选，阴影的尺寸
color	可选，阴影的颜色
inset	可选。将外部阴影改为内部阴影

text-shadow

值和阴影顺序一样

渐变

可以用代码实现渐变减少请求和带宽

线性渐变

background:linear-gradient( direction,color-stop1,color-stop2…,last-color );

径向渐变

background:radial-gradient(center, shape,size,start-color,…,last-color )

重复渐变

background:repeating-线性渐变（径向渐变）