<!DOCTYPE html>
<html>
<head>
<title>CSS3影子</title>
<meta charset="utf-8">
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
#shadows #container{
width: 600px;
background:yellow;
margin: 40px auto;
padding: 20px;
box-sizing: border-box;
box-shadow: 15px 20px 20px -10px black;
/*box-shadow物件影子: 橫向(可以為負值) 直向(可以為負值) 擴散 尺寸(縮小或擴大) 顏色 內陰影; */
}
#shadows h1{
color: white;
text-shadow: 0px 2px 5px blue,0 2px 10px red, 0 3px 15px black;
/*text-shadow文字影子:(可以設定多層影子，用逗號分隔)*/
}
</style>
</head>
<body id="shadows">
<div id="container">
<h1>CSS3 Shadows</h1>
<p>Present commodo cursus magna, vel scelerisque nisk cinsectetur et. Sed posuere consetetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui.</p>
</div>
</body>
</html>
留言列表
Impression (1)
