CSS coin image/Rayon

Question

i utilisé ce style d'angle:

.corners4{ 
    background:url(../img/panelHeaderColor.jpg) repeat-x; 
    -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; 
    -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; 
    -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; 
    -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; 
} 

mais cela ne fonctionne pas dans IE, est-il équivalent IE pour cela? merci

Answer 1

Si vous supprimez la partie -moz- de la propriété, vous aurez border-radius-topleft et ainsi de suite. Ce sont les propriétés border-radius. Ce sont seulement dans la norme CSS3. Avec les résultats actuels d'IE, CSS3 devrait être supporté vers 2017. Si vous voulez que cela fonctionne dans Safari, vous pouvez utiliser -webkit-border-radius. Voir this question pour plus d'informations sur les coins arrondis.

Answer 2

La -moz-partie signifie "Mozilla" - cette propriété n'est pas supportée par IE.

Il n'y a pas d'équivalent CSS pour cela qui fonctionne sur tous les navigateurs. Au moins pas encore.

Les coins incurvés sont une sérieuse source de problèmes à mettre en œuvre avec javascript, et la plupart des solutions ne sont pas très robustes. La meilleure façon absolue d'y parvenir d'une manière que tous vos utilisateurs pourront profiter est la façon old school d'utiliser vos propres images comme des coins, malheureusement. This website rend le processus plus facile, au moins. Si vous voulez vous lancer dans les solutions JS, j'ai entendu de bonnes choses sur curvyCorners.

Answer 3

IE semble être difficile avec des coins arrondis un grand nombre de fois. Dans l'ensemble, vous trouverez qu'il n'est pas très bien supporté, et il y a encore beaucoup d'utilisateurs qui reviennent à IE5.5 ou plus. Je recommanderais une approche différente.

Bien que je ne me rappelle pas exactement où je l'ai appris, je peux vous donner le code que j'ai sur mon site Web.

code HTML qui précède votre élément:

<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> 

code HTML qui vient après votre élément

<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b> 

Code CSS:

.b1, .b2, .b3, .b4{font-size:1px; overflow:hidden; display:block;} 
.b1 {height:1px; background: #000; margin:0 4px;} 
.b2 {height:1px; background: #fff; border-right:2px solid #000; border-left:2px solid #000; margin:0 2px;} 
.b3 {height:1px; background: #fff; border-right:1px solid #000; border-left:1px solid #000; margin:0 1px;} 
.b4 {height:2px; background: #fff; border-right:1px solid #000; border-left:1px solid #000; margin:0 0px;} 

Le code ci-dessus CSS, le # 000 va être la couleur de votre frontière. Le #FFF va être la couleur de votre boîte de contenu.

Vous ne voulez pas de bordure supérieure ni de bordure inférieure sur votre bloc de contenu, mais définissez les bordures gauche et droite sur 1px, puis la couleur que vous voulez que la bordure soit. En fonction de votre implémentation actuelle, cela peut sembler moins beau, et n'hésitez pas à ajouter d'autres balises b en appliquant la même logique pour obtenir un plus grand rayon. Si vous voulez un rayon plus grand et ne pouvez pas le comprendre, faites le moi savoir et je vais étendre cela pour être plus grand. Une note finale, en fonction de l'endroit où vous les placez, vous devrez peut-être un peu tweek les paramètres de marge.

Answer 4

Le problème de rayon d'angle de IE va résoudre.

http://kbala.com/ie-9-supports-corner-radius/

Answer 5

Vérifiez ce site: http://border-radius.com/ il generats pour WebKit css, Gecko, CSS3. Exemple:

-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
border-radius: 10px;