Utilizzando border-radius e box-shadow insieme (CSS)

Question

Ok, so che nessuno di queste proprietà sono ancora completamente supportato, ma sto usando loro in ogni caso: P

Quando aggiungo un border-radius e box -shadow (con e senza prefissi del fornitore), il raggio del raggio-bordo non è trasparente all'ombra-riquadro. Esempio: http://cndg.us/3f41a0

È possibile risolvere questo problema? Ho anche notato che -webkit-box-shadow ha alcuni problemi con le immersioni nascoste.

Answer 1

è possibile controllo qui: http://jsfiddle.net/Zw4QA/1/

io pensi di avere un elemento all'interno del div con i Corders arrotondati. Devi applicare gli angoli a questo elemento a. Al momento gli angoli arrotondati sull'elemento genitore non si applicano ai bambini a meno che non lo specifichi nel tuo CSS.

per più magico CSS3 controllare questo link: http://css3please.com/

Essere consapevoli del fatto che ogni singolo browser ha il proprio modo di gestire ombre e di frontiera raggio http://thany.nl/apps/boxshadows/

Answer 2

No, non è possibile al momento. Le due proprietà non sono davvero belle l'una con l'altra. Ti consiglio di utilizzare CSS per gli angoli arrotondati e una soluzione basata su immagini per l'ombreggiatura se DEVI avere angoli arrotondati con un'ombra esterna.

Answer 3

Per tabella con celle:

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

Mentre fustellatura giro sul sito di mio padre ho scoperto che è possibile aggiungere la caratteristica distanza per ombra. Quindi ho un calendario all'interno di un div, entrambi hanno i bordi arrotondati (0.7em per essere precisi) e volevo aggiungere un'ombra esterna, ma quelli quasi sempre hanno un bordo quadrato e come tale si scontreranno con i miei bordi arrotondati. Stai solo scherzando con l'attributo box-shadow e decidi cosa fare se aggiungo il raggio ad esso? Così ho fatto. Non riesco a trovare da nessuna parte online che menzioni questa tecnica, quindi avrei potuto scoprire qualcosa di unico. In ogni modo la storia abbastanza indietro, ecco i codici:

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; 

Ci si va così si sta aggiungendo un raggio alla scatola ombra in sé, come si farebbe normalmente ad un bordo.