HTML implementiert problemlos ein Beispiel für abgerundete Rechtecke-HTML-Tutorial-php.cn

HTML implementiert problemlos ein Beispiel für abgerundete Rechtecke

高洛峰

Freigeben： 2017-03-12 17:05:49

Original

2943 Leute haben es durchsucht

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 -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:

Hinweis: Der in meinem Code verwendete CSS-Stil ist inline. Es gibt drei CSS-Stile: inline, eingebettet und extern.

!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>

Nach dem Login kopieren

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!