Ich gab der Website nur einen kurzen Höhepunkt und im Grunde bieten sie Ihnen ein paar PNGs. Nicht schlecht, aber nicht die beste Lösung in allen Fällen. Da der aktuelle CSS-Standard nicht abgerundete Ecken unterstützt und neben Firefox/Mozilla niemand versteht dies:
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
Ich glaube, Sie mit nur einer Option stecken. Wählen Sie eine konstante Höhe und Breite für Ihr Element und erstellen Sie ein Png daraus. Sie können dann so etwas erstellen
span{
display:block;
width:100px; height:100px;
background-image:url("nice.png");
}
span:hover{
background-image:url("nice_hover.png");
}
Warum denke ich, dass es keinen anderen Weg gibt? Weil Sie nur effektiv die Attribute eines Elements mit dem "Hover" -Effekt ändern können. Hoffentlich CSS3 wird uns abgerundete Ecken ... Allerdings, wenn Sie die Verwendung von JavaScript machen dies ist eine ganz andere Geschichte ..
aktualisieren
ich darüber nachgedacht und ich wahrscheinlich präsentieren Ihnen alle verfügbaren floppte Optionen. Hier ist eine funktionierende Lösung für IE7 +, FF, Opera, die genau das erreicht, wonach Sie suchen. Ersetzen Sie einfach die Farbe durch ein Hintergrundbild. Es tut uns leid!
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Floating</title>
<style type="text/css">
.content p{
position:relative;
height:100px;
width:400px;
border:1px solid black;
}
.content p span{
position:absolute;
}
.content p .span1{
left:0;
top:0;
}
.content p .span2{
right:0;
top:0;
}
.content p .span3{
left:0;
bottom:0;
}
.content p .span4{
right:0;
bottom:0;
}
.content p:hover .span1{
background-color:red;
}
.content p:hover .span2{
background-color:blue;
}
.content p:hover .span3{
background-color:green;
}
.content p:hover .span4{
background-color:yellow;
}
</style>
<body>
<div class="content">
<p>
<span class="span1">1</span>
<span class="span2">2</span>
<span class="span3">3</span>
<span class="span4">4</span>
</p>
</div>
</body>
</html>
hey danke für den Kommentar :) yeah ich dachte, vielleicht war das der Fall - aber hoffte, es könnte eine Lösung mit a: Hover-Elemente für jedes div vom Schöpfer erstellt werden. also d. H. "Abgerundete_box_bottom div a: Hover" mit dem Hover-Bild usw. und schieben Sie in einige " .." - nicht sicher, ob dies funktioniert? –
könnte es nicht tun - am Ende nur benutzt http://www.atblabs.com/jquery.corners.html -: D –
Es ist nicht nur Firefox/Mozilla: Safari/Midori/Webkit Browser haben die vergleichbare "-Webkit-Grenze -radius: "und" -webkit-border-top-left-radius "(oder unten rechts, oben rechts, unten links) Optionen. –