Создание тени поля CSS3 на всех сторонах, но один
Уберите их если возможный . На многоплатформенной кодовой базе / кодовой базе мультикомпилятора (я работал над тем, который скомпилировал на 7 различных OSs с 6 различными компиляторами) это не всегда возможно все же. Я видел случаи, где компилятор всего неправильный (HP-UX aCC на Itanium, я смотрю на Вас), но это по общему признанию редко. Как другие отмечают, можно отключить предупреждение в такой ситуации.
Много раз то, что является предупреждением в этой версии компилятора, может стать ошибкой в следующей версии (любой обновляющий от gcc 3.x к 4.x должен быть знаком с этим), поэтому очистите его теперь.
Некоторые компиляторы испустят действительно полезные предупреждения, которые станут проблемами при определенных обстоятельствах - Visual C++, 2005 и 2008 могут предупредить Вас о 64-разрядных проблемах, который является ОГРОМНЫМ преимуществом в наше время. Если у Вас будут какие-либо планы мигрировать на 64-разрядный, то просто очищать те виды предупреждений существенно уменьшит Ваше время порта.
3 ответа
В вашем примере создайте div внутри #content с этим стилем
#content_over_shadow {
padding: 1em;
position: relative; /* look at this */
background:#fff; /* a solid background (non transparent) */
}
и измените стиль #content (удалите отступы) и добавьте тень
#content {
font-size: 1.8em;
box-shadow: 0 0 8px 2px #888; /* line shadow */
}
, добавьте тени на вкладки:
#nav li a {
margin-left: 20px;
padding: .7em .5em .5em .5em;
font-size: 1.3em;
color: #FFF;
display: inline-block;
text-transform: uppercase;
position: relative;
box-shadow: 0 0 8px 2px #888; /* the shadow */
}
Если вы добавили два промежутка для привязки, вы могли бы использовать два, например:
box-shadow: -1px -1px 1px #000;
на одном участке и
box-shadow: 1px -1px 1px #000;
на другом. Может сработать!
Если тени перекрываются, вы можете даже использовать 3 тени - одну на 1 пиксель влево, одну на 1 пиксель вправо и одну на 1 пиксель вверх, или любой другой толщины, которую вы хотите.
Cut it off with overflow.
<style type="text/css">
div div {box-shadow:0 0 5px #000; height:20px}
div {overflow:hidden;height:25px; padding:5px 5px 0 5px}
</style>
<div><div>tab</div></div>