垂直對(duì)齊
Paste_Image.png
- 外層的div需要設(shè)置：
display：table- 內(nèi)容的div設(shè)置：
（1）display：table-cell
（2）vertical-align：middle
<div id="content">
<div id="wenzi">
鋤禾日當(dāng)午淹遵，<br>
汗滴禾下土。<br>
誰(shuí)知盤(pán)中餐负溪，<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：水平陰影，垂直陰影川抡，羽化值辐真，陰影大小，陰影顏色，陰影類(lèi)別：內(nèi)陰影侍咱，外陰影
e.g.：box-shadow: 3px 3px 3px 3px #666666;
內(nèi)陰影.png
外陰影.png
<style>
#con {
width: 200px;height: 200px;
border: 1px solid red;
border-radius: 10px;
box-shadow: 3px 3px 3px 3px #666666; // 默認(rèn)是外陰影耐床，加上inset是內(nèi)陰影;
}
</style>
