Beim Erstellen von Webseiten müssen wir manchmal den Effekt abgerundeter Ecken erzielen. Die vorherige Methode bestand darin, den Designentwurf in Bilder zu schneiden, die leicht in Seiten umgewandelt werden können, und mehrere Hintergrundbilder zu verwenden, um abgerundete Ecken zu erzielen. Nach dem Aufkommen von CSS3 besteht kein Grund mehr, solche Probleme zu haben. CSS3 bietet eine Reihe von Eigenschaften zum Festlegen des abgerundeten Eckeneffekts von Elementen, wie unten gezeigt:
Die optionalen Werte der oben genannten Funktionen sind in der folgenden Tabelle aufgeführt:
border-radius wird verwendet, um abgerundete Ränder zu implementieren.
Beispiel:
<html><head><style>div{width:300px;height:300px;border:1pxsolidred;border-radius:20px;}</style></head><body><div></div></ Körper></html>Laufergebnisse:
Wenn ich den Randradius jedoch auf 150 Pixel einstelle, wird daraus ein kreisförmiger Rand
<html><head><style>div{width:300px;height:300px;border:1pxsolidred;border-radius:150px;}</style></head><body><div></div></ Körper></html>Laufergebnisse:
Der Einfachheit halber stellen Sie den Randradius einfach auf 50 % ein. Der Effekt ist der gleiche.
Wenn Sie jedoch einen Kreis zeichnen möchten, müssen Breite und Höhe gleich sein.
Tatsächlich können mehrere Attributwerte nach dem Randradius verbunden werden. Bei einem Attributwert wie dem oben genannten werden die vier Ecken standardmäßig auf diesen Attributwert gesetzt. Was ist die relative Methode? Beginnen Sie in der oberen linken Ecke und gehen Sie im Uhrzeigersinn vor.
Beispiel:
<html><head><style>div{width:300px;height:300px;border:1pxsolidblack;background:rgb(0,162,255);border-radius:50px0px20px100px;}</style></head><body><div ></div></body></html>Laufergebnisse:
Zeichnen wir zum Beispiel ein Ei:
<html><head><style>div{width:80px;height:100px;border:1pxsolidblack;background:rgb(0,162,255);border-radius:40px40px40px40px/60px60px40px40px;}</style></head><body> <div></div></body></html>Laufergebnisse:
