在網(wǎng)頁(yè)制作中，經(jīng)常需要對(duì)盒子添加陰影效果。
一、給盒子添加陰影
CSS3中的box-shadow屬性可以多實(shí)現(xiàn)陰影的添加，其基本語(yǔ)法格式如下：
box-shadow: h-shadow v-shadow blur spread color outset ; box-shadow: 水平偏移 垂直偏移 模糊度 陰影擴(kuò)展 陰影顏色 內(nèi)外陰影； |
在上面的語(yǔ)法格式中，box-shadow屬性共包含6個(gè)參數(shù)值，如表1所示。
提醒：該屬性可以加在任意元素上，如圖片，Div，SPAN，P標(biāo)簽等等都可以。
案例代碼：
<html>
<head>
<title>W3Cschool(w3cschool.cn)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#shadow {
box-shadow: 10px 10px 5px #888888;
width:500px;
padding:5px;
text-align:center;
font-size:20px;
background:#21759b;
margin:0 auto;
color:#ffffff;
}
</style>
</head>
<body>
<div id="shadow">W3Cschool(w3cschool.cn)</div>
</body>
</html>
|
預(yù)覽效果圖：
二、給文字添加陰影
text-shadow: 水平偏移 垂直偏移 模糊度 陰影顏色；
案例代碼：
<style>
.txt1{
font-size: 30px;
/* 第一個(gè)值垂直偏移 第二個(gè)值水平偏移 第三個(gè)像素·值越大越模糊 */
text-shadow: 5px 5px 1px red;
}
</style>
</head>
<body>
<h1 class="txt1">我是中國(guó)人，愛寫中國(guó)字</h1>
</body>
|
預(yù)覽效果圖：
