垂直对齐
Paste_Image.png
- 外层的div需要设置：
display：table- 内容的div设置：
（1）display：table-cell
（2）vertical-align：middle
<div id="content">
<div id="wenzi">
锄禾日当午，<br>
汗滴禾下土。<br>
谁知盘中餐，<br>
粒粒皆辛苦。<br>
</div>
</div>
#content {
width: 300px;
height: 300px;
border: 1px solid #000;
margin: auto;
display: table;
}
#wenzi {
border: 1px solid red;
text-align: center;
display: table-cell;
vertical-align: middle;
}
圆角矩形
Paste_Image.png
// 圆
div:nth-of-type(5){
border-radius: 50%;
}
// 扇形
div:nth-of-type(6){
border-radius: 0 0 200px;
}
// 圆形头像
img {
border-radius: 50%;
}
阴影效果
Box-shadow：水平阴影，垂直阴影，羽化值，阴影大小，阴影颜色，阴影类别：内阴影，外阴影
e.g.：box-shadow: 3px 3px 3px 3px #666666;
内阴影.png
外阴影.png
<style>
#con {
width: 200px;height: 200px;
border: 1px solid red;
border-radius: 10px;
box-shadow: 3px 3px 3px 3px #666666; // 默认是外阴影，加上inset是内阴影;
}
</style>
