#css中的凹凸字型筆記
先放一下效果圖檔
這裡為了顯示效果就将背景圖檔換成了灰色
凹凸字型的效果主要是用了text-shadow的特點
仔細觀察，可以發現突起的文字它的下陰影是黑色的（#000），上陰影是白色（#fff）的；凹陷的文字正好和突起相反，上陰影為黑色，下陰影為白色。
下面說text-shadow：
text-shadow: 1px 1px 2px #000,-1px -1px 2px #fff;
text-shadow有四個元素，并且可以多次相加。
第一個元素為水準位置，第二個為豎直位置，第三個為模糊距離，第四個為陰影顔色。
水準位置就是陰影在水準位置的寬度，豎直位置同理。
`<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background-color: #ccc;
}
div {
color: #ccc;
font: normal 700 80px "微軟雅黑"
}
div:first-child {
text-shadow: 1px 1px 2px #000,-1px -1px 2px #fff;
}
div:last-child {
text-shadow: -1px -1px 2px #000,1px 1px 2px #fff;
}
</style>
</head>
<body>
<div>突起的文字</div>
<div>凹陷的文字</div>
</body>
</html>`
這是一個簡單的例子，新手大佬勿噴，首先第一步是将整體背景設定為#ccc，即灰色，并且将div塊元素設定為灰色，并且調整字型。此時可以發現現在在浏覽器中打開是不顯示字型的，接着運用結構僞類選擇器将div的first-child和last-child設定相應的文字陰影。結束。
鞏固一下字型的知識：font的綜合字型樣式設定
font: font-style font-weight font-size font-family
#元素中間用空格隔開
前兩個可以預設省略，但必須保留font-size和font-family
![《HTML 5+CSS 3入門經典》——導讀[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)