Препятствуйте тому, чтобы тень поля показала на определенной стороне
Там какой-либо путь состоит в том, чтобы создать тень поля CSS, в которой независимо от значения размытости, тень только появляется на желаемых сторонах?
Например, если я хочу создать отделение с тенями на левых и правых сторонах и никакой тенью на вершине или нижней части. Отделение не абсолютно расположено, и его высота определяется содержанием.
- Редактирование-
@ricebowl: Я ценю Ваш ответ. Возможно, можно помочь с созданием полного решения решить проблемы, указанные в моем ответе на решение... Моя установка страницы следующие:
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="clearfooter"></div>
</div>
<div id="footer"></div>
И CSS как это:
#container {width:960px; min-height:100%; margin:0px auto -32px auto;
position:relative; padding:0px; background-color:#e6e6e6;
-moz-box-shadow: -3px 0px 5px rgba(0,0,0,.8),
3px 0px 5px rgba(0,0,0,.8);}
#header {height:106px; position:relative;}
#content {position:relative;}
#clearFooter {height:32px; clear:both; display:block; padding:0px; margin:0px;}
#footer {height:32px; padding:0px; position:relative; width:960px; margin:0px
auto 0px auto;}
3 ответа
Как я уже сказал в моем родственном вопросе, решение этой проблемы либо очень неясно, либо невозможно с текущей технологией. Очень жаль, что это невозможно сделать, поскольку это обычная тема в веб-дизайне.
Я прибег к использованию тени png, так как это кажется единственным разумным решением.
Спасибо за все ваши предложения.
Есть, но она довольно хрупкая.
Используя следующий xhtml:
<div id="wrap">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales justo nec mauris aliquam vitae feugiat magna congue. Morbi dignissim volutpat dui id porttitor. Donec auctor feugiat dolor, at varius magna rhoncus sed. Vivamus a odio urna, iaculis dignissim lectus. Integer aliquam felis eu sapien vestibulum ornare. Vivamus nec euismod sapien. Mauris quis eros ligula, sed pulvinar sem. Aenean sodales tempor malesuada. Aliquam erat volutpat. Aenean vel eros velit, et porttitor elit. Phasellus volutpat blandit quam eu fringilla. Integer ornare convallis tincidunt. Suspendisse commodo iaculis est vulputate volutpat. Donec at massa arcu. Sed sit amet commodo mauris. Aliquam erat volutpat. Integer eu augue vel erat euismod volutpat eu vel massa. Curabitur id erat vitae nisi imperdiet scelerisque id ut arcu. Quisque commodo dolor vitae erat imperdiet consectetur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales justo nec mauris aliquam vitae feugiat magna congue. Morbi dignissim volutpat dui id porttitor. Donec auctor feugiat dolor, at varius magna rhoncus sed. Vivamus a odio urna, iaculis dignissim lectus. Integer aliquam felis eu sapien vestibulum ornare. Vivamus nec euismod sapien. Mauris quis eros ligula, sed pulvinar sem. Aenean sodales tempor malesuada. Aliquam erat volutpat. Aenean vel eros velit, et porttitor elit. Phasellus volutpat blandit quam eu fringilla. Integer ornare convallis tincidunt. Suspendisse commodo iaculis est vulputate volutpat. Donec at massa arcu. Sed sit amet commodo mauris. Aliquam erat volutpat. Integer eu augue vel erat euismod volutpat eu vel massa. Curabitur id erat vitae nisi imperdiet scelerisque id ut arcu. Quisque commodo dolor vitae erat imperdiet consectetur.</p>
</div>
</div>
И следующий css:
#wrap {width: 70%;
margin: 1em auto;
overflow: hidden;
overflow-x: visible;
}
#content
{width: 90%;
margin: 0 auto;
-moz-box-shadow: 0 0 1em #ccc;
-webkit-box-shadow: 0 0 1em #ccc;
}
#content p
{overflow-y: hidden;
padding: 0.5em 0;
}
(Live demo находится здесь: http://davidrhysthomas.co.uk/so/shadows.html.)
Хрупкость проявляется, если добавить поля к содержащимся элементам (особенно к элементам , поэтому я использовал padding). Но, в основном, примените -moz-box-shadow (и/или -webkit-box-shadow) к #content div, и используйте #wrap div, чтобы зажать тень, используя overflow-y: hidden;, что, конечно, делает его еще более хрупким из-за количества браузеров, которые уважают overflow-y.
С другой стороны, браузеры, которые интерпретируют box-shadow более или менее определенно справляются с overflow-y.
Я думаю, что всегда будет небольшое просвечивание соседних сторон, которое станет более очевидным при более высоких значениях размытия. Вы можете компенсировать кажущееся просвечивание, используя низкое размытие и более высокое смещение для сторон, на которых вы хотите видеть тень. Например, это создаст заметную тень по бокам и почти невидимую сверху и снизу:
box-shadow: #888 3px 0px 2px, #888 -3px 0px 2px;