Javascript-форум - Как сделать тень не везде?

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - Как сделать тень не везде? (https://javascript.ru/forum/xhtml-html-css/22408-kak-sdelat-ten-ne-vezde.html)

ksa	18.10.2011 16:10

Как сделать тень не везде?

Хочу сделать тень только слева, справа и снизу... Но появляется какая-то полоса сверху... :-?
Как сделать такую тень?

<style>
div {
	width: 100px;
	height: 50px;
	margin-left: auto;
	margin-right: auto;
	border-left: 1px solid #bcb8b5;
	border-right: 1px solid #bcb8b5;
	border-bottom: 1px solid #bcb8b5;
	border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
	box-shadow: 0 0 0,2px 0 2px #d5d5d5,-2px 0 2px #d5d5d5,0 2px 2px #d5d5d5;
	-moz-box-shadow: 0 0 0 ,2px 0 2px #d5d5d5,-2px 0 2px #d5d5d5,0 2px 2px #d5d5d5;
	-webkit-box-shadow: 0 0 0 ,2px 0 2px #d5d5d5,-2px 0 2px #d5d5d5,0 2px 2px #d5d5d5;
}
</style>
<div></div>

ksa	18.10.2011 16:46

Такая же фигня, если делать тень только сверху...

<style>
div {
	width: 100px;
	height: 50px;
	margin-left: auto;
	margin-right: auto;
	border-left: 1px solid #bcb8b5;
	border-right: 1px solid #bcb8b5;
	border-top: 1px solid #bcb8b5;
	border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	box-shadow: 0 -2px 2px #d5d5d5,2px 0 2px #d5d5d5,-2px 0 2px #d5d5d5,0 0 0;
	-moz-box-shadow: 0 -2px 2px #d5d5d5,2px 0 2px #d5d5d5,-2px 0 2px #d5d5d5,0 0 0;
	-webkit-box-shadow: 0 -2px 2px #d5d5d5,2px 0 2px #d5d5d5,-2px 0 2px #d5d5d5,0 0 0;
}
</style>
<div></div>

Magneto

18.10.2011 16:58

<style>
div {
	width: 100px;
	height: 50px;
	margin-left: auto;
	margin-right: auto;
	border-left: 1px solid #bcb8b5;
	border-right: 1px solid #bcb8b5;
	border-top: 1px solid #bcb8b5;
	border-radius: 5px 5px 0 0;
	box-shadow: -2px -2px 2px #d5d5d5,2px -2px 2px #d5d5d5;}
</style>
<div></div>

Snipe

18.10.2011 17:00

По миом эксперементам получается, что это вылазят боковые тени, вот так ок (тока в последней мозилке проверял):

<style>
div {
    width: 100px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    border-left: 1px solid #bcb8b5;
    border-right: 1px solid #bcb8b5;
    border-top: 1px solid #bcb8b5;
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-box-shadow: 0 -2px 2px #d5d5d5,2px 0 2px #d5d5d5,-2px 0 2px #d5d5d5,0 0 0;
    -webkit-box-shadow: 0 -2px 2px #d5d5d5,2px 0 2px #d5d5d5,-2px 0 2px #d5d5d5,0 0 0;
    box-shadow: 0 -2px 2px #d5d5d5,2px -2px 2px #d5d5d5,-2px -2px 2px #d5d5d5,0 0 0;
}
</style>
<div></div>

ksa	18.10.2011 19:28

Ребята, спасибо. :) Буду завтра пробовать на своей страничке...

ksa	18.10.2011 19:38

Бивас, тест...

<style>
div {
	width: 100px;
	height: 50px;
	margin-left: auto;
	margin-right: auto;
	border-left: 1px solid #bcb8b5;
	border-right: 1px solid #bcb8b5;
	border-bottom: 1px solid #bcb8b5;
	border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
	box-shadow: 0 0 0,2px 2px 2px #d5d5d5,-2px 2px 2px #d5d5d5;
	-moz-box-shadow: 0 0 0  ,2px 2px 2px #d5d5d5,-2px 2px 2px #d5d5d5;
	-webkit-box-shadow: 0 0 0  ,2px 2px 2px #d5d5d5,-2px 2px 2px #d5d5d5;
}
</style>
<div></div>

Да - боковые тени лезут... :)

Часовой пояс GMT +3, время: 06:20.