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

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

30 голосов
/ 26 апреля 2010

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

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

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

Ответы [ 4 ]

46 голосов
/ 26 апреля 2010

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

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

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

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

0 голосов
/ 12 декабря 2014

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

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

0 голосов
/ 27 сентября 2012

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

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;
}
0 голосов
/ 26 апреля 2010

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

...