CSS3之阴影
CSS3中新增屬性-陰影，可以做出很多漂亮的效果。
文字陰影text-shadow
text-shadow屬性值的順序：
text-shadow: h-shadow v-shadow blur color;
參數分別表示水平陰影位置，垂直陰影位置，模糊半徑，陰影顏色。
一個栗子：
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>CSS3陰影</title><style type="text/css">p{margin: 0;font-family: helvetica,arial,sans-serif;color: #999;text-align: center;font-size:80px;font-weight:bold;text-shadow:10px 10px #333; }</style> </head><body><p>Text Shadow</p> </body> </html>圖圖：
通過控制水平位移和垂直位移可以控制陰影偏向，正值偏右偏下。負值偏左偏上。
栗子：
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>CSS3陰影</title><style type="text/css">p{margin: 0;font-family: helvetica,arial,sans-serif;color: #999;text-align: center;font-size:80px;font-weight:bold;text-shadow:-10px -10px #333; }</style> </head> <body><p>Text Shadow</p> </body> </html>圖圖：
可以修改模糊半徑來控制陰影的模糊程度：
栗子：
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>CSS3陰影</title><style type="text/css">p{margin: 0;font-family: helvetica,arial,sans-serif;color: #999;text-align: center;font-size:80px;font-weight:bold;text-shadow:10px 10px 30px #333; }</style> </head> <body><p>Text Shadow</p> </body> </html>圖圖：
也可以定義多個陰影用逗號隔開：
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>CSS3陰影</title><style type="text/css">p{margin: 0;font-family: helvetica,arial,sans-serif;color: #fff;text-align: center;font-size:80px;font-weight:bold;text-shadow:20px 50px 10px #600,30px -10px 10px #060,-40px 20px 10px #006; }</style> </head> <body><p>Text Shadow</p> </body> </html>圖圖
還可以來點特效，比如燃燒：
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>CSS3陰影</title><style type="text/css">body{background:#000;}p{margin: 0;padding:24px;font-family: helvetica,arial,sans-serif;color: #000;text-align: center;font-size:80px;font-weight:bold;text-shadow:0 0 4px #fff,0px -5px 4px #ff3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20; }</style> </head> <body><p>Text Shadow</p> </body> </html>圖圖：
浮雕效果：
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>CSS3陰影</title><style type="text/css">body{background:#ccc;}p{margin: 0;padding:24px;font-family: helvetica,arial,sans-serif;color: #d1d1d1;background:#ccc;text-align: center;font-size:80px;font-weight:bold;text-shadow:-1px -1px #fff,1px 1px #333; }</style> </head> <body><p>Text Shadow</p> </body> </html>圖圖：
盒子陰影box-shadow
box-shadow的屬性值的順序：
box-shadow: hoff voff bd sd color inset;這里，hoff?指示水平偏移，voff?指示垂直偏移，bd?指示模糊距離，sd?指示擴散距離，color?指示陰影的顏色，inset?是一個關鍵字，在使用時指示陰影是內部陰影，而不是外部陰影。前兩個值是屬性工作所必需的值，所有值都必須按照列出的順序指定。
上一些栗子：
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>CSS3陰影</title><style type="text/css">#sbox{width: 200px;padding: 32px;background: #3385ff;text-align: center;-webkit-box-shadow:5px 5px 10px black;-moz-box-shadow: 5px 5px 10px black;box-shadow: 5px 5px 10px black; }</style> </head><body><div id="sbox">Box Shadow</div> </body> </html>
圖圖：
轉載于:https://www.cnblogs.com/linda586586/p/4194362.html
總結
- 上一篇： thinkphp3.2 jquery a
- 下一篇： CSS3弹性伸缩布局(一)——box布局