1.阴影
文本阴影 text-shadow: 10px 10px 1px red;
盒子阴影 box-shadow: 10px 10px 10px (10px) red (inset);
参数1:水平方向位移 参数2:竖直方向位移
参数3:模糊程度/模糊距离 px 参数4:阴影颜色
盒子阴影中括号内分别为阴影大小和内阴影属性 都支持多重阴影,用逗号隔开即可
2.圆角
border-radius: 10px 20px 30px 40px;
/*偏移距离px 或者 百分比
v1,四个角一样
v1,v2 左上右下,左下右上 对角线上一致
v1,v2,v3 左上 左下右上 右下
v1,v2,v3,v4 上左开始顺时针,盒子的距离设置由上开始*/
border-top-left-radius: 50px;
/*单独设置一个角的弧度时,垂直方向写在前,水平方向写在后*/
border-radius: 30px/60px;/*30px/60px表示水平方向30px/竖直方向60px,只支持原生写法*/
border-radius: 10px 20px 30px 40px/50px 60px 70px 80px;
border-radius: 50%;
3.圆角阴影案例
<style>
*{
margin: 0;
padding: 0;
}
input{
outline: none;
font-size: 25px;
}
.out{
width: 937px;
height: 120px;
margin: 0 auto;
border: 1px solid #dfdfdf;
border-radius: 20px;
box-shadow: 0 14px 7px #bfbfbf;
margin:28px 27px 35px 25px;
background: #f5f5f5;
}
[type=text]{
width: 680px;
height: 80px;
border-radius: 5px;
border: 1px solid #cccccc;
margin: 20px;
text-indent: 11px;
}
[type=button]{
width: 200px;
height: 80px;
background-image: url(./1.png);
color: white;
border-radius: 5px;
}
</style>
<div class="out">
<input type="text" placeholder="Search...">
<input type="button" value="GO">
</div>
4.字体引入
@font-face{(引入字体)
font-family:任意名字
src:url(字体地址)}
选择器标签{(引用字体)
font-family:任意名字}
5.怪异盒模型
box-sizing: border-box;将标准盒模型改为怪异盒模型,width=content+padding+border,给盒子内加padding和border属性时,盒子的大小不变,利于布局
6.弹性盒模型:弹性盒是一种新的布局方式,特别适合移动端布局 display:flex
1)父盒子加弹性盒的影响:
1.子元素默认横行排列,主轴横线排列,flex-direction:row/column/-reverse(逆向)
2.行内元素,自动变为块级元素
3.只有一个元素的时候,margin:auto 自动水平居中
4.调整主轴对齐方式 justify-content:flex-start左对齐、flex-end右对齐、center居中、space-between两端对齐、space-around距离环绕
5.调整侧轴:align-items:flex-start左对齐、flex-end右对齐、center居中
6.折行:flex-wrap(默认不折行,压缩同一行的元素盒子)
7.项目对齐(盒子内的每一个元素称为项目)algin-self:flex-start/-end,center,baseline,stretch(默认为伸展,主轴横向项目不设置高度和主轴纵向不设置宽度都默认撑满)
8.项目顺序:order:数字,默认为0,数字越大越往后,可以为负数
9.剩余宽高:项目上使用flex,不设置数值则按原始宽高布局,设置任意数值后占满剩余空间,同时设置时按照flex的值等比划分
2)总结:
1.dispaly:flex设置为弹性盒模型,设置后,横轴的项目自动拉伸至父盒子的高度,纵轴的项目自动拉伸至父盒子宽度
2.flex-direction:row/column/-reverse 设置主轴方向,默认设置了侧轴,reverse表示设置逆向的轴向
3.justify-content:flex-start/-end,center,space-around/-between 设置主轴对其方式
align-items:同上,设置侧轴对其方式
4.flex-wrap:wrap/nowrap 折行,默认不折行,压缩同一行元素的盒子
5.align-content:控制折行后的间距,命令同主侧轴对齐方式
6.algin-self:设置项目的对齐方式,注意stretch属性
7.order:通过数字大小调整项目位置
8.flex:数字,设置剩余宽高,使用在项目上,不设置则按原始宽高布局