Heim >Web-Frontend >HTML-Tutorial >So fügen Sie Elementen mit Randradius abgerundete Ränder hinzu
So fügen Sie Elementen mit Randradius abgerundete Ränder hinzu
- php中世界最好的语言Original
- 2018-01-20 09:35:222255Durchsuche
Dieses Mal zeige ich Ihnen, wie Sie dem Randradiuselement einen abgerundeten Rand hinzufügen. Welche Vorsichtsmaßnahmen gibt es, um dem Randradiuselement einen abgerundeten Rand hinzuzufügen? Hier ist der eigentliche Kampf. Werfen wir einen Blick auf den Fall.
border-radius:10px; /* Alle Ecken sind mit einem Radius von 10px*/
border-radius: 5px 4px 3px 2px; /* Die vier Radiuswerte sind die obere linke Ecke, obere rechte Ecke, untere rechte Ecke und untere linke Ecke, im Uhrzeigersinn*/
Denken Sie nicht, dass der Wert des Randradius nur in px-Einheiten angegeben werden kann. Sie können auch Prozentsätze oder em verwenden , aber die Kompatibilität ist noch nicht sehr gut.
Voller oberer Halbkreis:
Methode: Stellen Sie die Höhe auf die Hälfte der Breite ein und stellen Sie nur den Radius der oberen linken und oberen rechten Ecke so ein, dass er mit der Höhe des Elements übereinstimmt (größer als OK).
div{
height:50px;/*是width的一半*/
width:100px;
background:#9da;
border-radius:50px 50px 0 0;/*半径至少设置为height的值*/
}Voller Kreis:
Methode: Stellen Sie die Breiten- und Höhenwerte so ein, dass sie konsistent sind (d. h. ein Quadrat), und legen Sie die vier Werte für abgerundete Ecken darauf fest Halber Wert.
Der folgende Code:
div{
height:100px;/*与width设置一致*/
width:100px;
background:#9da;
border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>border-radius</www.dztcsd.com/title>
<style type="text/css">
div.circle{
height:100px;/*与width设置一致*/
width:100px;
background:#9da;
border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
}
/*任务部分*/
div.semi-circle{
height:100px;
width:50px;
background:#9da;
border-radius:?;
}
</style>
</head>
<body>
<div class="circle">
</div>
<br/>
<!--任务部分-->
<div class="semi-circle">
</div>
</body>
</html>Ich glaube, dass Sie die Methode beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie auf der chinesischen PHP-Website Sonstiges verwandte Artikel!
Verwandte Lektüre:
So verwenden Sie den SSE-Server von h5 zum Senden von EventSource-Ereignissen
Details zum lokalen Speicher und zur lokalen Datenbank von H5 Wir stellen vor
h5, wie man die Passwort-Erinnerungsfunktion implementiert
Das obige ist der detaillierte Inhalt vonSo fügen Sie Elementen mit Randradius abgerundete Ränder hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!