‹div›: градиентът на фона се изрязва, когато няма рамка

Разгледайте следния код: http://jsfiddle.net/A98vk/

Обвивката div има два (горен ляв и горен десен) заоблени ъгъла. Вторият div е директно вложен и бих искал да му дам фонов градиент.

Проблемът, който изпитвам, е, че фоновият линеен градиент (съжалявам, че добавям само версия на webkit, имам Chrome) се изрязва, когато css свойството border или липсва, или е зададено на 0 или 0px [any params]. Когато задам отново свойството, проблемът се решава.

Може ли някой да ми каже какъв е проблемът с него? Разбирам, че мога просто да задам border: 1px solid rgba(0,0,0,0), но това изглежда като заобиколно решение за мен.


html css crop linear-gradients
person wh1t3cat1k    schedule 18.07.2013    source източник
comment
Бих казал, че току-що сте открили грешка   -  person Brewal    schedule 18.07.2013
comment
Сигурно е интересен случай   -  person Chris Laarman    schedule 18.07.2013
comment
@Brewal, не. това е просто свиване на поле в действие (като отбелязано от отговора на JOPLOmacedo)   -  person Gabriele Petrioli    schedule 18.07.2013
comment
@GabyakaG.Petrioli Да, +1 отговора му. Все още намирам това поведение за странно :)   -  person Brewal    schedule 18.07.2013
comment
@wh1t3cat1k, моля, добавете също стандартния W3C ред без префикс за градиента във вашата цигулка (linear-gradient(to bottom, #abcdef, #febcda);). Дизайнът само за Webkit не е добра практика.   -  person Ilya Streltsyn    schedule 18.07.2013

Отговори (2)


arrow_upward
5
arrow_downward

Настъпва срив на маржа. Има тонове въпроси/отговори относно свиването на маржове в stackoverflow. Аз сам отговорих на един (може би повече): Добавяне CSS рамката променя позиционирането в HTML5 уеб страница

По принцип маржът на h1 се "свива" и вместо това се прилага към околния хедър. Не се изрязва фон. Заглавката просто става по-малка.

Полетата на елементите се свиват, когато между тях няма нищо. Когато добавите границата там горе, вие поставяте нещо между тях, следователно няма свиване на маржа.

Трябва да знаете малко повече за това, включително други начини за спиране на срива на маржовете. Можете да проверите отговора ми по-горе или просто да го потърсите в Google за може би по-подробни обяснения.

person João Paulo Macedo    schedule 18.07.2013
comment
+1, можете също да прочетете за него в спецификациите: w3.org /TR/CSS21/box.html#collapsing-margins - person Gabriele Petrioli; 18.07.2013

arrow_upward
1
arrow_downward

Можете да добавите overflow:auto (или hidden) към .header div и да коригирате изрязването.

Вижте тази демонстрация

person otinanai    schedule 18.07.2013
comment
Мисля, че той иска точно обратното - person Brewal; 18.07.2013