让弹出的DIV四边都有阴影效果

[justimkiss]

同标题，让弹出的DIV四边都有阴影效果

[xuexiaodong2009]

[Quote=引用 3 楼 justimkiss 的回复:]

引用 1 楼 xuexiaodong2009 的回复:

改变border的样式
border-bottom-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

参数：

none : 　无边框。与任何指定的border-width值无关
hidde……
[/Quote]border宽度，改没改

[madpc]

为什么这么多人在js版问 html/css 问题..


盒阴影 box-shadow，在CSS3是这样的：
-o-box-shadow: 10px 10px 5px #888;
-icab-box-shadow: 10px 10px 5px #888;
-khtml-box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;

在IE中通过滤镜：
filter:
progid:DXImageTransform.Microsoft.DropShadow(color=#969696, offx=1, offy=1)
progid:DXImageTransform.Microsoft.DropShadow(color=#C2C2C2, offx=1, offy=1)
progid:DXImageTransform.Microsoft.DropShadow(color=#EFEFEF, offx=1, offy=1);

除了IE外的其它内核浏览器都支持CSS3，包括 Firefox Chrome Safari 和 Opera

[zell419]

[Quote=引用 4 楼 xuexiaodong2009 的回复:]

引用 3 楼 justimkiss 的回复:

引用 1 楼 xuexiaodong2009 的回复:

改变border的样式
border-bottom-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

参数：

none : 　无边框。与任……
[/Quote]
border 宽度跟阴影有什么关系 ~

[madpc]

		<style type="text/css" media="screen">
			.shadow{
			border:1px solid;
			width:300px;
			-o-box-shadow: 10px 10px 5px #888;
			-icab-box-shadow: 10px 10px 5px #888;
			-khtml-box-shadow: 10px 10px 5px #888;
			-moz-box-shadow: 10px 10px 5px #888;
			-webkit-box-shadow: 10px 10px 5px #888;
			box-shadow: 10px 10px 5px #888;
			filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=5);
			background:#fff;
			}
		</style>

		<div class="shadow">
			<div>
				test<br/>content
			</div>
		</div>

[justimkiss]

解决了，先前是运用了5楼的方法，但是不能做到四边都有阴影的效果。因此提出了这个问题。5楼的 -moz-box-shadow: 10px 10px 5px #888; 在FireFox里面显示的效果应该是四边都有阴影的。但是实际情况是只有右边和下边才有阴影显示。这也是我纠结的原因。大家有兴趣可以看看http://www.buxianyu.com/2010/12/21/translation-use-moz-box-shadow/

[wuwu8ku]

mark

[xuexiaodong2009]

改变border的样式
border-bottom-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

参数：

none : 　无边框。与任何指定的border-width值无关
hidden : 　隐藏边框。IE不支持
dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
dashed : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
solid : 　实线边框
double : 　双线边框。两条单线与其间隔的和等于指定的border-width值
groove : 　根据border-color的值画3D凹槽
ridge : 　根据border-color的值画菱形边框
inset : 　根据border-color的值画3D凹边
outset : 　根据border-color的值画3D凸边

[kk297173176]

阴影效果

[justimkiss]

[Quote=引用 1 楼 xuexiaodong2009 的回复:]

改变border的样式
border-bottom-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

参数：

none : 　无边框。与任何指定的border-width值无关
hidden : 　隐藏边框。IE不支持
dotted :……
[/Quote]没有什么感觉的啊