Heute lernen wir, mit der CSS3-Technologie abgerundete Ecken zu erzielen, ohne dass Bilder erforderlich sind. Mit CSS3 können wir den Effekt abgerundeter Ecken des Seitenleistentitelhintergrunds und des Suchfelds erzielen. Notieren Sie es zur späteren Verwendung. W3C hat seit langem die CSS3-Eigenschaft formuliert, die abgerundete CSS-Ecken implementiert: border-radius Firefox und Safari implementieren diese Funktion auch über private Eigenschaften:
<div style="background-color: #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000; padding: 10px;" >Firefox und Safari implementieren abgerundete Ecken< /div>
Der Effekt ist wie folgt:
Unter anderem ist -moz-border-radius eine private Eigenschaft, die von Firefox zum Implementieren abgerundeter Ecken verwendet wird, und -webkit-border-radius ist eine private Eigenschaft, die von Webkit-Kernbrowsern (wie Safari und Chrome) zum Implementieren abgerundeter Ecken verwendet wird Sie müssen nur angeben, dass eine bestimmte Ecke abgerundet ist. Was Winkel betrifft, definieren sie alle vier Attribute:
-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius
Natürlich wird dies vom IE (einschließlich IE8) immer noch nicht unterstützt, sodass der Effekt nur in Firefox, Safari und Chrome angezeigt werden kann.