Mit border-radius und box-shadow zusammen (CSS)

Question

Ok, ich weiß, keine dieser Eigenschaften sind noch vollständig unterstützt, aber ich verwende sie trotzdem: P

Wenn ich ein border-radius und Feld hinzufügen -shadow (mit und ohne Herstellerpräfixe) ist der Radius des Rahmenradius für den Box-Schatten nicht transparent. Beispiel: http://cndg.us/3f41a0

Ist das möglich zu beheben? Ich habe auch bemerkt, dass -webkit-box-shadow einige Probleme mit versteckten divs hat.

Answer 1

ist es möglich, hier überprüfen: http://jsfiddle.net/Zw4QA/1/

Ich glaube, Sie haben ein Element in Ihrem div mit den abgerundeten Recordern. Sie müssen die Ecken auf dieses Element anwenden. Im Moment werden abgerundete Ecken des übergeordneten Elements nicht auf die untergeordneten Elemente angewendet, es sei denn, Sie geben sie in Ihrem CSS an.

für mehr CSS3 Magie dieses Link: http://css3please.com/

Beachten Sie, dass jeder einzelner Browser seine eigene Art und Weise des Umgangs mit Schatten und Grenzradius mit Zellen http://thany.nl/apps/boxshadows/

Answer 2

Nein, momentan nicht möglich. Die zwei Eigenschaften spielen nicht wirklich gut miteinander. Ich würde empfehlen, CSS für die abgerundeten Ecken und eine bildbasierte Lösung für den Schlagschatten zu verwenden, wenn Sie einfach abgerundete Ecken mit einem Schlagschatten haben müssen.

Answer 3

Für Tabelle hat:

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

Während mein Vater Webseite dinking um auf entdeckte ich, dass Sie der Radius Charakteristik Schatten hinzufügen. Also habe ich einen Kalender innerhalb eines div, beide haben abgerundete Kanten (0.7em um genau zu sein) und ich wollte einen Schlagschatten hinzufügen, aber diese haben fast immer eine eckige Kante und würden als solche mit meinen abgerundeten Kanten kollidieren. Nur herumspielen mit Box-Schatten-Attribut und entscheiden, was passiert, wenn ich Radius hinzufügen? So tat ich. Ich kann nirgendwo online finden, dass diese Technik erwähnt, so dass ich etwas einzigartiges entdeckt haben könnte. Sowieso genug hier ist wieder Geschichte, die Codes:

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; 

Dort gehen Sie, so dass Sie einen Radius an die Box Hinzufügen selbst Schatten wie Sie in der Regel zu einer Grenze tun würde.