Ausführliche Erläuterung von Beispielen für die Implementierung der Randrundung in HTML-HTML-Tutorial-php.cn

Ausführliche Erläuterung von Beispielen für die Implementierung der Randrundung in HTML

Y2J

Freigeben： 2017-05-24 09:53:55

Original

4800 Leute haben es durchsucht

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

Code

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>

Nach dem Login kopieren

HTML-freies Video-Tutorial

2.html implementiert eine feste Tabelle und kann nach oben scrollen, unten, links und rechts

Detaillierte Erläuterung häufig verwendeter HTML-Tags in der Front-End-Entwicklung

4 Scrolleffekt durch Marquee-Tag

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