Mit der CSS3-Eigenschaft border-radius können Sie für jedes Element „abgerundete Ecken“ erstellen. Mit der Eigenschaft border-radius können Sie die folgenden Regeln verwenden:
(1) Vier Werte: Der erste Wert ist die obere linke Ecke, der zweite Wert ist die obere rechte Ecke, der dritte Wert ist die untere rechte Ecke und der vierte Wert ist die untere linke Ecke (2) Drei Werte: der erste Der Wert ist die obere linke Ecke, der zweite Wert ist die obere rechte Ecke und die untere linke Ecke, der dritte Wert ist die untere rechte Ecke (3) Zwei Werte: Der erste Wert ist die obere linke Ecke und die untere rechte Ecke Der zweite Wert ist die obere rechte Ecke und die untere linke Ecke (4). Ein Wert: Die vier Verrundungswerte sind gleich
Wenn Sie möchten, dass die Grafiken einen abgerundeten Eckeneffekt haben, müssen Sie nur ein Attribut hinzufügen, das border-radius-Attribut. Wenn Sie möchten, dass es sehr rund ist, erhöhen Sie diesen Wert.
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<title>Homepage</title>
<Stil>
div{
Breite: 100px;
Höhe: 100px;
Hintergrundfarbe: rgb(151, 26, 49);
Randradius: 10px;
}
img{
Breite: 100px;
Höhe: 100px;
Randradius: 10px;
}
</style>
</head>
<Körper>
<div>
<img src="../vue/1.jpg">
</div>
</body>
</html>Wenn Sie möchten, dass es rund ist, schreiben Sie einfach 100 %.
Box-Shadow-Schatteneffekt
Rand: 0 Auto: Es besteht keine Notwendigkeit, den oberen und unteren Bereich zu steuern. Dadurch werden die linken und rechten Abstände gleichmäßig verteilt und das Feld wird dann zentriert. Die Aufgabe von Auto besteht darin, die Lücken zwischen dem linken und dem rechten Bereich gleichmäßig zu verteilen.
0 bedeutet keinen Schatten in horizontaler Richtung, die zweite 0 bedeutet keinen Schatten in vertikaler Richtung und die dritte bedeutet die Unschärfe des Schattens.
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<title>Homepage</title>
<link href="" type="text/css" rel="stylesheet"/>
<style type="text/css">
div{
Breite: 500px;
Höhe: 500px;
Hintergrundfarbe: grüngelb;
Rand: 0 automatisch;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<Körper>
<div class="d1">
</div>
</body>
</html>Damit ist dieser Artikel über die neuen CSS3-Funktionen Box-Shadow-Schatteneffekt und abgerundeter Randradius abgeschlossen. Weitere Informationen zur neuen CSS3-Funktion Box-Shadow finden Sie hoffentlich in früheren Artikeln auf downcodes.com Sie werden downcodes.com in Zukunft stärker unterstützen!