?????-???
CSS3? box-shadow ?? ???? ?? ??? ??:
?? ????? ???? ?????. Box-shadow? ? ???? ??? ? ????.
(1).box: div? ?? ?? ???? ??? ??? ?????.
(2).shadow: ??? ??.
?? ?? ? ??? ??? ??? ??? ???? ? ?????.
? ???? ?? ??? ?? box-shadow ??? ???? ?????.
?? ??? ??? ????.
box-shadow:h-shadow v-shadow blur spread color inset;
???? ??:
1.h-shadow: ??, ?? ???? ?? ???? ???? ?? ?? ? ? ????. ??? ?????.
2.v-shadow: ??, ?? ???? ?? ???? ???? ?? ?? ? ??? ??? ?????.
3.blur: ?? ??, ??? ?? ??. ??? ?????. 0? ?? ?? ?? ??? ?? ??? ??? ?????.
4.spread: ????, ???? ??? ?? ??(?? ?? ? ??), ??? ?????.
5.color: ?? ?????. ? ????? ???? ????? ?? ??? ?????. ??? ???? ??? ??? ?????.
6.inset: ?? ???? ?? ???? ?? ???? ??? ? ????.
?? ?:
? 1:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:50px 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>? ??? ???? ?? ? ?? ???? ???? ??? ?? ??? ????. ??? ??? ?????. ????? ?? ??? ?????. ??? ????? ??? ?????. ? ??? ????? ???? ?? ?? ????.
? 2:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:50px 50px red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>? ??? div? ??? ???? ??? ??? ?????.
?? 3
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:50px 50px 10px red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>? ??? div ???? ?? ? ?? ???, ?? ?? ? ??? ??? ?????.
?? 4:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:50px 50px 10px 10px red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>? ??? div ???? ?? ? ?? ???, ?? ??, ??? ?? ?? ? ??? ??? ?????.
? 5:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:30px 10px 10px 10px red inset;
}
</style>
</head>
<body>
<div></div>
</body>
</html>? ??? div? ?? ???? ???? ?? ????? ??? ? ????.
? 6:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:30px 10px 10px 10px red,10px 20px 15px 10px blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
