1. Accueil
  2. Question et réponse
  3. comment faire la disposition en coin rond par css pur et html?

comment faire la disposition en coin rond par css pur et html?

2009-06-22 5 views

Répondre

7

css pur et html? (en supposant que vous n'entendiez pas utiliser des images pour les coins, ou une image de fond ....)

un certain nombre de navigateurs prennent en charge des bordures arrondies par exemple.

-moz-border-radius 
-webkit-border-radius 
border-radius

Aucune de ces travaux dans IE mais

(Voir la réponse de Jeff here et les commentaires.)

Source

2009-06-22 23:51:31

+0

Ainsi, une version compatible doit être avec javascript? Si oui, allez-y. – omg

+2

en utilisant javascript pour faire des coins arrondis semble être un gaspillage complet de ressources pour moi. Et ces implémentations basées sur le canevas n'ont aucun sens car les navigateurs supportant le canevas prennent également en charge les coins arrondis. Si c'est * important * d'avoir des coins arrondis, vous êtes coincé avec des images. Je vous recommande d'utiliser les propriétés CSS listées ci-dessus et d'accepter qu'elles se dégradent gracieusement dans les navigateurs non compatibles. –

+0

cela ne fonctionne pas non plus dans n'importe quelle version d'Opera. – Mike

1

comme des coins maintenant arrondis sont pris en charge dans Firefox et Safari par l'extension du navigateur

Le coin arrondi fait partie de la spécification CSS3, donc si vous voulez implémenter un coin arrondi en utilisant du CSS et HTML pur maintenant, il est possible d'utiliser uniquement les extensions du navigateur (-moz-border-radius pour Firefox -webkit pour safari)

vous pouvez également obtenir le même en utilisant JavaScript plugins

Source

2009-06-22 23:58:50 Rony

0

Si les images sont autorisés font 4 coins dans le programme graphique de votre choix, en faire le background-image de certaines balises span/div et les aligner correctement via le position: absolue; dans un conteneur qui est positionné sur: relatif ;. Si vous voulez seulement utiliser CSS, vous pouvez faire la même chose, mais au lieu de choisir une image de fond, chaque pixel doit être défini. Dans un coin de 5 par 5, vous avez besoin approximativement de 10-12 étiquettes pour ces étiquettes. En d'autres termes, environ 40 par panneau, ce qui pourrait conduire à un surcoût de 1 octet (CSS) +1 (div/span) K pour un panneau. Bien que personnellement, je n'adopterais pas cette approche, c'est possible et cela fonctionnerait probablement dans la plupart des navigateurs.

Source

2009-06-23 00:29:41 merkuro

0

Vous pouvez utiliser des règles CSS3:

  • -rayon -khtml-frontière: 5px;/* pour Konqueror (navigateur linux) */
  • -moz-border-radius: 5px;/* pour toute version de Firefox */
  • -webkit-border-radius: 5px;/* pour Safari et Google Chrome */
  • border-radius: 5px;/* Pour les navigateurs qui prennent en charge CSS3 */

Source

2009-06-23 08:58:32 Mike

1

Ne se souvient pas où j'ai trouvé cette technique, mais this page énumère plusieurs solutions similaires:

<html> 
    <head> 
     <title>hm</title> 
     <style type="text/css" media="screen"> 
      body{ 
       background:#000; 
      } 
      .heading{ 
       color:#1d4b76; 
       padding-top:1em; 
       width:10em; 
       text-align:center; 
      } 
      .heading h2 { 
       font-size:2em; 
       padding:.2em; 
       margin:0; 
       background-color:#1e1e1e; 
      } 
      /* Rounded header */ 
      b.rtop b, b.rbottom b{display:block;height: 1px; overflow: hidden; background: #1e1e1e} 
      b.r1{margin: 0 5 0 5px} 
      b.r2{margin: 0 2 0 3px} 
      b.r3{margin: 0 1 0 2px} 
      b.rtop b.r4, b.rbottom b.r4{margin: 0 0 0 1px; height: 2px; background:#1e1e1e;} 
     </style> 
    </head> 
    <body> 
     <div class="heading"> 
      <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b> 
      <h2>Example!</h2> 
      <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b> 
     </div>   
    </body> 
</html>

Pour le site sur lequel j'ai utilisé cette option, j'ai supprimé les marges de droite pour les utiliser pour les en-têtes alignés à droite (b.r1{margin: 0 0 0 5px} et ainsi de suite):

Example of rounded corner http://img81.imageshack.us/img81/1796/picture4o.png

Source

2009-06-24 15:30:44 dbr

0

Salut moi avons récemment eu à surmonter le même problème, un widget redimensionnable avec des coins arrondis, bordure intérieure, ombre et laisser tomber un fond dégradé. Il doit également fonctionner sur tous les navigateurs (IE6 inclus).

En supposant que vous utilisez Photoshop et que vous vous occupiez de vos fichiers source correctement, c'est assez facile. Au total, il nécessite 4 images (jusqu'à 7 en fonction de la façon dont vous soutenez IE6), ceux-ci peuvent tous être découpés dans le fichier photoshop original, donc c'est assez facile.

Consultez le lien ci-dessous.

http://thatguynamedandy.com/blog/css-widget-rounded-corner-gradient-drop-shadow

Source

2009-07-21 11:53:34

Questions connexes

 Questions connexes