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

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

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

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

Ответ 1

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

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

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

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

Ответ 2

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

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;
}

Ответ 3

Во время погружения на сайт моего отца я обнаружил, что вы можете добавить характеристику радиуса в тень. Таким образом, у меня есть календарь внутри 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;

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

Ответ 4

Нет, сейчас невозможно. Эти два свойства не очень хорошо сочетаются друг с другом. Я бы рекомендовал использовать CSS для закругленных углов и решение на основе изображений для тени, если вы просто ДОЛЖНЫ иметь закругленные углы с тень.