Сделайте одного дочернего переполнения видимым из переполнения: скрытый (или что-то еще) - PullRequest
2 голосов
/ 13 июля 2011

Я хочу что-то, похожее на это http://jsfiddle.net/mazlix/VBzau/3/

Но я не хочу дважды писать радиус границы (в div.left в CSS).Я имею в виду, я могу, но я просто чувствую, что это расточительно и признак того, что я это неправильно структурировал.

Пожалуйста, дайте мне знать, если это кажется единственным способом правильно достичь того, чего я хочу.

Спасибо!

Ответы [ 3 ]

1 голос
/ 13 июля 2011
border-radius:15px 0 0 15px;

Смотрите здесь: http://www.css3.info/preview/rounded-border/

1 голос
/ 13 июля 2011

Я почти на 98% уверен, что вы не сможете обойти это.

0 голосов
/ 13 июля 2011

1.

Итак ... Я не знаю, если это вариант, но вы можете использовать фоновое изображение во внешнем контейнере. Этот фон будет иметь желаемую ширину и высоту в 1 пиксель и будет содержать 2 желаемых цвета рядом И это будет повторяться по вертикали.


2

Это, однако, опция css3: вы можете использовать горизонтальный градиент. По сути, такой же, как и в приведенном выше варианте, возможно, он немного более гибкий, поскольку он не использует изображение, а градиент css3, как уже упоминалось. http://jsfiddle.net/VBzau/13/

Градиент был сделан с использованием http://www.colorzilla.com/gradient-editor/


3

Тогда есть старая добрая маскировка. Чтобы в основном использовать изображение или изображения, которые являются негативами радиуса границы и имеют тот же цвет, что и фон, на котором размещено поле.

Очень похоже на то, что используется здесь как запасной вариант в области основного контента со скользящим контентом http://www.apple.com/imac/


4

Я подумал о том, как вы упомянули о структуре. Вот что я бы порекомендовал. http://jsfiddle.net/VBzau/14/

По сути, я поставил другой контейнер, обертывающий вокруг основного контейнера. Повторное применение переполнения: скрыто; и забрал радиусы из левого ящика. Также я переместил изображение в новый внешний контейнер.


Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...