Heim > Artikel > Web-Frontend > So legen Sie abgerundete Randecken in HTML fest
So legen Sie abgerundete Randecken in HTML fest
- 青灯夜游Original
- 2021-12-14 14:37:2949513Durchsuche
Einstellungsmethode: 1. Verwenden Sie das Attribut „border-radius“, die Syntax „border-radius: filet radius;“ 2. Verwenden Sie das Attribut „border-image“, um einen Rahmen mit einem Bild mit abgerundeten Ecken zu erstellen, die Syntax „border- Bild: URL (abgerundete Bildadresse) 20 fill;".
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
HTML-Rand mit abgerundeten Ecken festlegen
1. Verwenden Sie das Attribut „Randradius“
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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>
2. Verwenden Sie das Attribut „Randbild“
Verwenden Sie ein Bild mit abgerundeten Ecken Rand
Beispiel:
Bilder verwenden: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.border_image{
width:100px;
border:double gray 10px;
border-image:url(https://img.php.cn/upload/article/000/000/024/61b839d3982fc635.png) 20 fill;
text-align:center;
color:white;
}
</style>
</head>
<body>
<div class="border_image">1</div>
</body>
</html>
Empfohlenes Tutorial: „HTML-Video-Tutorial“
Das obige ist der detaillierte Inhalt vonSo legen Sie abgerundete Randecken in HTML fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!