Heute lernen wir, die CSS3-Technologie zu verwenden, um abgerundete Ecken zu erzielen, ohne dass Bilder erforderlich sind. Mit CSS3 können wir den abgerundeten Eckeneffekt des Seitenleistentitelhintergrunds und den abgerundeten Eckeneffekt 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:
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. Für Winkel 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 es vom IE (einschließlich IE8) immer noch nicht unterstützt, sodass der Effekt nur in Firefox, Safari und Chrome angezeigt werden kann.