Heim > Artikel > Web-Frontend > HTML implementiert problemlos ein Beispiel für abgerundete Rechtecke
HTML implementiert problemlos ein Beispiel für abgerundete Rechtecke
- 高洛峰Original
- 2017-03-12 17:05:492915Durchsuche
In diesem Artikel wird hauptsächlich die Methode zur einfachen Implementierung des abgerundeten Rechtecks-Beispiels in HTML ausführlich vorgestellt und Ihnen erklärt, wie Sie das abgerundete Rechteck mithilfe von P + CSS und Positionierung realisieren können. Interessierte Freunde können sich auf
Frage: Wie erreiche ich 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 Schneiden Sie das Bild aus))
Stil: Attribute , die im Kopf>-Tag gesetzt werden sollen:
1.Position : relativ;
2. Breite und Höhe;
4. (nach der Anpassung können Sie die Grenzlinieneinstellung löschen)
Beim Festlegen des CSS einer kleinen Ebene müssen die Attribute in jeder Ebene vorhanden sein:
1.Position: absolut;
2. Breite und Höhe;
3. Richtungsattribute (
links
, rechts, unten, oben) 4.
Hintergrund
: URL ("") no-repeat; (Einführung abgerundeter Bilder in alle Richtungen) Das Folgende ist mein Code zum Implementieren von a abgerundetes Rechteck:
!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>Das obige ist der detaillierte Inhalt vonHTML implementiert problemlos ein Beispiel für abgerundete Rechtecke. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!