Une idée de la façon dont je peux obtenir des angles ronds travailler avec plusieurs frontières?
La boîte sera dynamique, selon ce qui sera entré dans la boîte, je ne peux donc pas ajouter de largeur ou de hauteur statique. html Le problème que je dois actuellement est quand je t'ertirons toutes les bordures étirent symétriquement, alors comment puis-je résoudre ce problème ? FYI Je suis actuellement intéressé à obtenir CSS travaillant dans FF et Chrome.
8 Réponses :
Je suggère d'utiliser l'excellent plug-in JQuery Round Corner.
Il est soutenu dans tous les navigateurs, y compris IE. Il tire des coins dans IE en utilisant des divs imbriqués (pas d'images). Il dispose également d'un rayon de frontière indigène d'arrondi dans des navigateurs qui l'appuient (Opera 10.5+, Firefox, Safari et Chrome). Donc, dans ces navigateurs, le plugin définit simplement une propriété CSS à la place. P>
Vous devez inclure le script JQuery et JS avant corps > code>. Ensuite, écrivez votre jQuery comme $ ('div, p'). Coin ('10px'); et placer avant ''. Donc, votre HTML ressemblera au code ci-dessous. Ici, je fais des coins rondes pour tous les div code> et p code> tags. Si vous voulez le faire pour une pièce d'identité ou une classe spécifique, vous pouvez faire quelque chose comme $ ('# myid'). Coin (); Code> P> <body>
<div class="x"></div>
<p class="y"></p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
<script>$('div, p').corner();</script>
</body>
Comment cela traite-t-il de la question de l'OP?
Le plug-in permet à OP de développer la largeur tout en maintenant toujours le navigateur croisé de rayon de frontière individuel.
La seule solution CSS que je peux offrir est limitée à une double bordure, avec l'espace entre ces bornes de la même couleur que le fond de l'élément bordé, par exemple le HTML:
#box {
border: 10px double #f90;
border-radius: 1.5em;
padding: 1em;
color: #000;
background-color: #ffa;
}
+1 Ceci est la meilleure solution de CSS que je pense. Il devra ajouter une DIV extérieure à avoir plus de contrôle sur ce qui se passe.
Pour ajouter à la solution de David:
La double bordure est assez limitée. Toutefois, si vous êtes prêt à modifier votre balisage, vous pouvez résoudre votre problème en faisant: dans votre CSS: Cela vous permettra de définir la couleur de fond entre les deux frontières à ce que vous voulez.
Il vous laissera également jouer avec la largeur de votre frontière.
body { background: #d2d1d0; }
#box {
background: #F4F4F4;
border: 3px solid blue;
position: relative;
height: 100%;
width: 100%;
}
#box p {
padding: 10px;
}
#box:before {
-moz-border-radius: 15px;
border-radius: 15px;
}
#box {
-moz-border-radius: 9px;
border-radius: 9px;
}
#box:after {
-moz-border-radius: 12px;
border-radius: 12px;
}
#box:before {
border: 3px solid red;
content: '';
position: absolute;
top: -9px;
right: -9px;
bottom: -9px;
left: -9px;
}
#box:after {
border: 3px solid green;
content: '';
position: absolute;
top: -6px;
right: -6px;
bottom: -6px;
left: -6px;
}
définitivement une bonne approche. permet d'utiliser un style de bordure différent de chaque côté
Démo et code en direct ici: http: // jsfiddle. net / mygsh / 1 / p>
[Cette démo a 8 bordures différentes] p>
Le HTML: P>
.gradient-border {
border: 8px solid #000;
-moz-border-radius: 12px;
-moz-border-bottom-colors: #555 #FF0000 #777 #888 #00FF00 #aaa #0000FF #ccc;
-moz-border-top-colors: #555 #FF0000 #777 #888 #00FF00 #aaa #0000FF #ccc;
-moz-border-left-colors: #555 #FF0000 #777 #888 #00FF00 #aaa #0000FF #ccc;
-moz-border-right-colors: #555 #FF0000 #777 #888 #00FF00 #aaa #0000FF #ccc;
padding: 5px 5px 5px 15px;
}
Il y a quelques façons d'obtenir plusieurs frontières avec des coins ronds. Personnellement, je vais pour une méthode qui utilise des ombres. Pour votre code HTML, vous pouvez faire quelque chose comme ça.
Le HTML P>
#box{
border-radius: 15px;
background: #f4f4f4;
border: 3px solid #bbbbbb;
box-shadow: 0 0 0 3px #8B2323,
0 0 0 6px #FF7F00,
0 0 0 9px #458B00;
width: 100%;
height: 100%;
margin: 10px auto;
position: relative;
}​
Je suis venu avec ce code pour une image liée à l'aide d'une bordure de bloc en ligne enveloppée dans une ombre de boîte avec une ombre de la boîte 2ème boîte pour une frontière à 2 couches avec une ombre, 3 couches Total & no CSS Style nécessaire.
Inline Le bloc crée la 1ère frontière puis une ombre de la boîte crée le 2e et le glaçage sur le gâteau ajoute l'ombre suivie du code arrondi qui capture également la bordure de bloc inline.
Pour l'utiliser pour le texte, il suffit de changer d'image Style à l'enveloppe Style & Remplacer l'image Src avec texte et supprimez le lien si vous n'en avez pas besoin.
Toutes les réponses sont bonnes jusqu'à présent, verront la meilleure chose pour moi!