Использование границы радиуса и коробка-тень вместе (CSS)

Question

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

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

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

Answer 1

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

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

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

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

Answer 2

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

Answer 3

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

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

Answer 4

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

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