Heim > Artikel > Web-Frontend > Ausführliche Erläuterung von Beispielen für die Implementierung der Randrundung in HTML
Ausführliche Erläuterung von Beispielen für die Implementierung der Randrundung in HTML
- Y2JOriginal
- 2017-05-24 09:53:554743Durchsuche
In diesem Artikel wird hauptsächlich detailliert beschrieben, wie man abgerundete Rechtecke einfach in HTML implementiert, und es wird erklärt, wie man abgerundete Rechtecke über P + CSS und Positionierung implementiert. Interessierte Freunde können sich auf
Frage: Wie implementiert man ein abgerundetes Rechteck durch P+CSS und Positionierung beziehen?
Lösungsübersicht:
Inhalt: Fügen Sie zunächst eine große Ebene innerhalb des 6c04bd5ca3fcae76e30b72ad730ca86d-Tags hinzu (die große Ebene wird verwendet, um den gesamten großen Rahmen zu fixieren). ), und dann enthält die große Ebene vier kleine Ebenen (platzieren Sie vier abgerundete Ecken in jeder der vier kleinen Ebenen (verwenden Sie PS, um im Voraus eine ovale Form zu erstellen, und verwenden Sie dann das Slice-Werkzeug, um das Bild auszuschneiden))
Stil: Das Attribut , das im head>-Tag festgelegt ist, muss Folgendes haben:
1 ; 2. Breite und Höhe;
4 Grenzlinie kann festgelegt werden
Löschen
)
Beim Festlegen des CSS einer kleinen Ebene müssen in jeder Ebene folgende Attribute vorhanden sein: 1.Position: absolut ;
2. Breite und Höhe;
3. Richtungsattribute (
links
,
rechts
, unten, oben) 4.Hintergrund: URL ("") no-repeat; (Einführung abgerundeter Ecken in alle Richtungen
Bilder
) So habe ich den Kreiscode für das Eckrechteck implementiert:
XML/HTML
Kopieren Inhalt in die Zwischenablage Hinweis: Der in meinem Code verwendete CSS-Stil ist inline. Es gibt drei CSS-Stile: inline, eingebettet und extern.
【Verwandte Empfehlungen】<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>圆角制作</title>
<style type=text/css>
#p
{
position:relative;
width:400px;
height:200px;
background:black;
margin:auto;
}
#plefttop
{
position:absolute;
width:50px;
height:50px;
background:url("images/11.jpg") no-repeat;
}
#prighttop
{
position:absolute;
width:50px;
height:50px;
right:-9px;
top:0px;
background:url("images/22.jpg") no-repeat;
}
#pleftbottom
{
position:absolute;
width:50px;
height:50px;
left:0px;
bottom:-14px;
background:url("images/33.jpg") no-repeat;
}
#prightbottom
{
position:absolute;
width:50px;
height:50px;
right:-9px;
bottom:-14px;
background:url("images/44.jpg") no-repeat;
}
</style>
</head>
<body>
<p id=p>
<p id=plefttop></p>
<p id=prighttop></p>
<p id=pleftbottom></p>
<p id=prightbottom></p>
</p>
</body>
</html>1.
HTML-freies Video-Tutorial2.html implementiert eine feste Tabelle und kann nach oben scrollen, unten, links und rechts
3.Detaillierte Erläuterung häufig verwendeter HTML-Tags in der Front-End-Entwicklung
4 Scrolleffekt durch Marquee-Tag5. Codebeispiele für das Schreiben eines persönlichen Lebenslaufs in HTML
Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Beispielen für die Implementierung der Randrundung in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!