Совместное использование border-radius и box-shadow (CSS)

Хорошо, я знаю, что ни одно из этих свойств еще не полностью поддерживается, но я все равно их использую: P

Когда я добавляю border-radius и box-shadow (с префиксами поставщиков и без них), радиус border-radius непрозрачен для box-shadow. Пример: http://cndg.us/3f41a0.

Это возможно исправить? Я также заметил, что -webkit-box-shadow имеет некоторые проблемы со скрытыми div.


css mozilla webkit
person Gary    schedule 26.04.2010    source источник

Ответы (4)


arrow_upward
64
arrow_downward

можно проверить здесь: http://jsfiddle.net/Zw4QA/1/

Я думаю, у вас есть элемент внутри вашего div с закругленными углами. Вам нужно применить углы к этому элементу. В настоящий момент закругленные углы родительского элемента не будут применяться к дочерним элементам, если вы не укажете это в своем CSS.

для получения дополнительных сведений о магии CSS3 перейдите по этой ссылке: http://css3please.com/

Имейте в виду, что в каждом браузере свой способ обработки теней и радиуса границы http://thany.nl/apps/boxshadows/

person meo    schedule 26.04.2010
comment
border-radius + box-shadow по-прежнему не работает в safari для больших значений (например, если вы используете box-shadow для создания полупрозрачного фона для наложения), но работает в других современных браузерах: jsfiddle.net/Zw4QA/1622 - person Timothy Zorn; 22.09.2017

arrow_upward
1
arrow_downward

Согласно документации MDN, box-shadow автоматически выбирает радиус границы самого элемента. Вот ссылка: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#:%7E:text=The%20box%2Dshadow%20property%20enables,на%20the%20same%20ounded%20corners

person Daggie Blanqx - Douglas Mwangi    schedule 05.12.2020

arrow_upward
-1
arrow_downward

Для таблицы с ячейками:

JSFiddle

HTML

<table>
    <tr>
        <td class='one'>One</td>
        <td class='two'>Two</td>
    </tr>
    <tr>
        <td colspan="2" class='three'>Three</td>
    </tr>
</table>

CSS

body {
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 padding: 100px;
 background: pink;
}

table {
/* basic */
 background-color: #fff;
 margin: 0 auto;
 width: 200px;
 padding: 100px;
 text-align: center;
/* border-radius */
 border-radius: 20px;
/* box-shadow */
 box-shadow: rgba(0,0,0,0.8) 0 0 10px;
 border-collapse: collapse;
}

table td{
  color: white;
}

td.one{
    border-radius: 20px 0 0 0;
    background-color: black;
}
td.two{
    border-radius: 0 20px 0 0;
    background-color: darkgreen;
}
td.three{
    border-radius: 0 0 20px 20px;
    background-color: darkred;
}
person dylfin    schedule 27.09.2012
comment
есть ли шанс объяснить этот код, чтобы кто-то, кто придет позже, мог его понять, и почему это может быть ответом на поставленный вопрос? - person Andrew Barber; 28.09.2012
comment
Я подумал, что этого примера со скрипкой будет достаточно. Border-radius и border-shadow хорошо работают для таблицы, но border-radius не ограничивает ячейки таблицы. Им требуется собственный радиус границы, соответствующий границе радиуса таблицы, чтобы ограничить заливку фона. Вы даже этого не замечаете, пока не используете фон ячейки. - person dylfin; 21.11.2012
comment
Я бы сказал, что это лучшее решение, чем принятый ответ. Единственное, чего ему не хватает, так это объяснения. - person Sujit Kumar Singh; 09.06.2020

arrow_upward
-7
arrow_downward

Пока искал на сайте моего отца, я обнаружил, что вы можете добавить характеристику радиуса к тени. Итак, у меня есть календарь внутри div, оба имеют закругленные края (точнее 0,7em), и я хотел добавить к нему падающую тень, но они почти всегда имеют квадратный край и поэтому будут конфликтовать с моими закругленными краями. Просто возитесь с атрибутом box-shadow и решаете, что, если я добавлю к нему радиус? Так я и сделал. Не могу найти нигде в Интернете, где упоминается эта техника, поэтому я, возможно, обнаружил что-то уникальное. В любом случае достаточно предыстории, вот коды:

CSS:

box-shadow-bottom-right-radius: 0.7em; //you can enter whatever value you want
box-shadow-bottom-left-radius: 0.7em;
box-shadow-top-right-radius: 0.7em;
box-shadow-top-left-radius: 0.7em;

Итак, вы добавляете радиус к самой тени блока, как обычно к границе.

person RCCRF    schedule 12.12.2014