z-index堆叠顺序
- 一旦修改了元素的定位方式,则元素可能会发生堆叠
- 可以使用z-index属性来控制元素框出现的重叠顺序
- z-index仅能在定位的元素上生效
- z-index属性:
-值为数值,数值越大表示堆叠顺序越高,即离用户越近
-可以设置为负值,表示离用户更远,一般不要设置
-z-index仅在定位元素上生效
居中总结
- 内容水平居中text-align:center
- 一行文字垂直居中line-heighe=height
- 盒子水平居中margin: 0 auto
- 子元素于父元素居中
.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-线性渐变(径向渐变)