box-shadow
與文字陰影類似,可分別設定盒子陰影偏移量、模糊度、顏色(可設透明度)。
box-shadow: x軸偏移量 y軸偏移量 [陰影模糊半徑] [陰影擴充套件半徑] [陰影顏色] [投影方式];
如box-shadow: 5px 5px 5px #ccc
1、水平偏移量 正值向右 負值向左;
2、垂直偏移量 正值向下 負值向上;
3、模糊度是不能為負值;
4、inset可以設定內陰影;
注:設定邊框陰影不會改變盒子的大小,即不會影響其兄弟元素的布局。可以設定多重邊框陰影,實現更好的效果,增強立體感,實際開發中可以大膽使用。
/* 外陰影*/
.outset {
width: 100px;
height: 100px;
/* x 偏移量 y偏移量 陰影模糊半徑 陰影擴充套件半徑 陰影顏色*/
box-shadow: 10px2px 20px;
/* 內陰影*/
.inset {
width: 100px;
height: 100px;
/* x 偏移量 y偏移量 陰影模糊半徑 陰影擴充套件半徑 陰影顏色*/
box-shadow: 10px2px 20px inset;
/* 陰影x為負數*/
.negative1 {
:
width: 100px;
height: 100px;
box-shadow: -10px2px 6px red;
/* 陰影y為負數*/
.negative2 {
width: 100px;
height: 100px;
box-shadow: 4px-10px 6px red;
/* 多陰影*/
.multi {
width: 100px;
height: 100px;
/*如果需要新增多個陰影只需要用逗號隔開*/
box-shadow: 4px2px 20px red, -4px -2px 6px green, 0px 0px 12px 5px blue inset;
*******相應**
相關效果

div 邊框陰影
在css樣式裡建了.mydiv 然後在頁面裡面乙個div呼叫 內容顯示效果居然木有陰影 卻在div框架下面多了點空隙,沒有顏色 求高手幫忙啊 最佳答案 經過測試,google chrome firefox和ie7都可以看到陰影。請問你用的什麼瀏覽器?為了保證各瀏覽器的效果統一,建議你聽一樓的話,用。...
Qt之陰影邊框
陰影邊框很常見,諸如360以及其他很多軟體都有類似效果,了解css3的同學們應該都知道 box shadow,它就是來設定陰影效果的,那麼qt呢?看過一些資料,說是qss是基於css2的,既然如此,box shadow是基於css3的!那麼qt定然就用不了!搜了一些資料,每張都做成陰影效果的固然不可...
陰影邊框設定部分
1 使用前注意引入以下框架 quartzcore.framework 2 頭部檔案引入 import 1 設定陰影相關 csharp view plain copy uicolor color1 uicolor colorwithred 108.0 255 green 108.0 255 blue ...