2009-07-20 6 views
0

Y at-il quelque chose comme ça qui peut fonctionner avec IE? Pas d'images et avec des frontières?CSS: Comment ajouter un coin arrondi avec bordure et pas d'image?

http://www.css3.info/preview/rounded-border/ 
+0

Email [email protected] :-) - désolé, n'a pas pu résister. –

+0

CSS 3 est probablement sur leur agenda. Si d'autres choses comme SVG et MathML sont, c'est discutable, cependant. – Joey

Répondre

1

Avec CSS3, vous pouvez réaliser ceci sans utiliser aucune image.

Mais n'est pas pris en charge dans de nombreux navigateurs.

+0

Par "beaucoup", vous voulez dire IE, non? –

5

Je ne l'ai pas essayé, mais vous pouvez consulter sur ce

Nifty Corners Cube: rounded corners without images - 
URL is http://www.html.it/articoli/niftycube/index.html 

ou vous pouvez essayer

JQuery Corners - 
http://www.atblabs.com/jquery.corners.html 

Exemple d'utilisation -

<div style="background-color:#acc; padding:10px" class="rounded"> 
    Example with different x and y sizes. 
</div> 
<script>$(document).ready(function(){ 
    $('.rounded').corners("30px 10px"); 
});</script> 

Works with: 

    * iPhone 
    * Chrome 
    * Firefox 
    * Safari 2+ 
    * Opera 9.0+ 
    * Internet Explorer 6+ 
    * and probably more... 
+2

+1 pour les coins arrondis jQuery! – usoban

0

Essayez Nifty Corners Cube, mais ne vous permet pas d'avoir une couleur de bordure différente de la couleur de fond interne. Vous aurez besoin de trouver une solution de contournement (coin astucieux dans un coin astucieux). Vous pouvez également consulter le menu principal de jQueryUI. Il utilise des images mais vous pouvez l'utiliser pour concevoir votre propre thème et tout ce que vous avez à faire est de télécharger l'ensemble du paquet contenant les scripts, les styles et les images. Découvrez la partie où vous pouvez créer Highlight/Error.

Voici un échantillon du cube astucieux de coins dans un autre coin astucieux. Juste voir la source. Nifty Corners Cube sample

0

Essayez celui-ci:

http://www.cssplay.co.uk/boxes/curves.html

Cette méthode utilise pas d'images, pas de javascript, mais un peu de HTML supplémentaire avec CSS.

Fondamentalement, cette méthode est basée sur les balles d'utilisation (•). Les balles reçoivent la couleur désirée et sont placées dans les quatre coins de la boîte. La boîte est relativement positionnée, les balles sont positionnées absolument. C'est à dire qu'ils sont positionnés absolument par rapport à la boîte parent.

Questions connexes