Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So stellen Sie div in CSS auf abgerundete Ecken ein

王林
Freigeben: 2023-01-06 11:13:35
Original
19195 Leute haben es durchsucht

Die Möglichkeit, das Div in CSS so einzustellen, dass es abgerundete Ecken hat, besteht darin, das Attribut „border-radius“ für das Div festzulegen, z. B. [border-radius:5px]. Die Eigenschaft border-radius ist eine zusammengesetzte Eigenschaft, die es uns ermöglicht, Elementen abgerundete Ränder hinzuzufügen.

So stellen Sie div in CSS auf abgerundete Ecken ein

Die Betriebsumgebung dieses Artikels: Windows 10-System, CSS 3, Thinkpad T480-Computer.

Wir können die Ecken abrunden, indem wir das Attribut border-radius hinzufügen. Der spezifische Code lautet wie folgt:

So stellen Sie div in CSS auf abgerundete Ecken ein

Effekt:

So stellen Sie div in CSS auf abgerundete Ecken ein

Das Attribut border-radius kann bis zu vier Ränder -*- Radius angeben Zusammengesetzte Eigenschaft der Eigenschaft. Mit dieser Eigenschaft können Sie Elementen abgerundete Ränder hinzufügen!

Beispiel:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style> 
div
{
	border:2px solid #a1a1a1;
	padding:10px 40px; 
	background:#dddddd;
	width:300px;
	border-radius:25px;
}
</style>
</head>
<body>

<div>border-radius 属性允许您为元素添加圆角边框! </div>

</body>
</html>
Nach dem Login kopieren

Ergebnisse anzeigen:

So stellen Sie div in CSS auf abgerundete Ecken ein

Zugehöriges Video-Tutorial: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo stellen Sie div in CSS auf abgerundete Ecken ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!