css3中的陰影怎么寫
box-shadow 屬性--設置元素陰影
實例： 向 div 元素添加 box-shadow
<!DOCTYPEhtml>
<html>
<head>
<style>
div{
width:300px;
height:100px;
background-color:#ff9900;
-moz-box-shadow:10px10px5px#888888;/*老的Firefox*/
box-shadow:10px10px5px#888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
text-shadow屬性---設置文字陰影
<!DOCTYPEhtml>
<html>
<head>
<style>
h1{
text-shadow:5px5px5px#FF0000;
}
</style>
</head>
<body>
<h1>文本陰影效果！</h1>
</body>
</html>
css3如何實現(xiàn)邊框陰影
我們在制作網(wǎng)頁的時候可以用CSS3添加邊框，那么如果要給邊框添加陰影該怎么做呢？下面我給大家分享一下。
工具/材料
SublimeText
首先打開Sublime Text軟件，新建一個HTML文檔，如下圖所示
然后在html文檔的Body區(qū)域插入一個div，如下圖所示
接下來給div定義一些樣式，注意其中的box-shadow就是定義邊框陰影的，如下圖所示
最后我們運行界面程序，你會看到邊框已經(jīng)被添加上陰影了，如下圖所示
CSS3-盒子陰影:box-shadow
box-shadow:none|shadow
它的值包括 6 個參數(shù)：陰影類型，X軸位移，Y軸位移，陰影大小，陰影擴展和陰影顏色。此 6 個參數(shù)可以有選擇地省略。
瀏覽器兼容性
Webkit支持：-webkit-box-shadow
Mozilla支持：-moz-box-shadow
IE9支持：box-shadow
IE8及以前：不支持
實用實例
簡單效果:
img{
height:300px;
-moz-box-shadow:5px 5px;
-webkit-box-shadow:5px 5px;
box-shadow:5px 5px;
}
虛陰影效果:
img{
height:300px;
-moz-box-shadow:2px 2px 10px #06c;
-webkit-box-shadow:2px 2px 10px #06c;
box-shadow:2px 2px 10px #06c;
}
漸變陰影效果:
img{
height:300px;
-moz-box-shadow:0 0 10px #06c;
-webkit-box-shadow:0 0 10px #06c;
box-shadow:0 0 10px #06c;
}
帶光暈效果
img{
height:300px;
-moz-box-shadow:0 0 10px 10px #06c;
-webkit-box-shadow:0 0 10px 10px #06c;
box-shadow:0 0 10px 10px #06c;
}
內(nèi)陰影效果
img{
height:300px;
-moz-box-shadow:int 5px 5px 10px #06c;
-webkit-box-shadow: int 5px 5px 10px #06c;
box-shadow: int 5px 5px 10px #06c;
}
彩色陰影
img{
height:300px;
-moz-box-shadow:0 0 10px red,
2px 2px 10px 10px yellow,
4px 4px 12px 12px green;
-webkit-box-shadow:0 0 10px red,
2px 2px 10px 10px yellow,
4px 4px 12px 12px green;
box-shadow:0 0 10px red,
2px 2px 10px 10px yellow,
4px 4px 12px 12px green;
}
CSS3四周陰影效果怎么做？
直接使用box-shadow:5px 5px 10px black int;屬性設置樣式樣式就可以了。
前兩個值（5px 5px）是水平和垂直方向的偏移量，正值陰影就會向左向下偏移，負值反之；
第三個值（10px）是設置模糊距離；
black就是陰影的顏色啦；
最后一個int是在元素內(nèi)部創(chuàng)建一個陰影，也就是內(nèi)陰影了；
刪除掉int就是設置外陰影了
css3邊框陰影border-shadow有什么作用？
設置邊框陰影不會影響盒子的布局，即不會影響其兄弟元素的布局
spread可以與blur、h-shadow、v-shadow相互抵消，blur不可為負值
可以設置多重邊框陰影，實現(xiàn)更好的效果，增強立體感。by三人行慕課
css3是否可以對元素單邊加陰影
可以.用陰影擴展半徑.
擴展陰影半徑一般設置為和糊模半徑大小相同，并取其負值。
box-shadow: 0 10px 10px -10px #ccc;
box-shadow屬性至多有6個參數(shù)設置，他們分別取值：
陰影類型：此參數(shù)是一個可選值，如果不設值，其默認的投影方式是外陰影；如果取其唯一值“int”,就是將外陰影變成內(nèi)陰影，也就是說設置陰影類型為“int”時，其投影就是內(nèi)陰影；
X-offt:是指陰影水平偏移量其值可以是正負值可以取正負值，如果值為正值，則陰影在對象的右邊，反之其值為負值時，陰影在對象的左邊；
Y-offt:是指陰影的垂直偏移量，其值也可以是正負值，如果為正值，陰影在對象的底部，反之其值為負值時，陰影在對象的頂部；
陰影模糊半徑：此參數(shù)是可選，，但其值只能是為正值，如果其值為0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；
陰影擴展半徑：此參數(shù)可選，其值可以是正負值，如果值為正，則整個陰影都延展擴大，反之值為負值是，則縮小
陰影顏色：此參數(shù)可選，如果不設定任何顏色時，瀏覽器會取默認色，但各瀏覽器默認色不一樣，特別是在webkit內(nèi)核下的safari和chrome瀏覽器將無色，也就是透明，建議不要省略此參數(shù)。
