Explication détaillée d'exemples de mise en œuvre de l'arrondi des frontières en HTML-tutoriel HTML-php.cn

Explication détaillée d'exemples de mise en œuvre de l'arrondi des frontières en HTML

Y2J

Libérer： 2017-05-24 09:53:55

original

4754 Les gens l'ont consulté

Cet article présente principalement en détail comment implémenter facilement des rectangles arrondis en HTML, et vous explique comment implémenter des rectangles arrondis via p+css et le positionnement ? Les amis intéressés peuvent se référer à

Question : Comment implémenter un rectangle arrondi via p+css et positionnement ?

Aperçu de la solution :

Contenu : ajoutez d'abord un grand calque à l'intérieur de la balise (le grand calque est utilisé pour fixer le grand cadre global ), puis le grand calque contient quatre petits calques (placez quatre coins arrondis dans chacun des quatre petits calques (utilisez PS pour créer une forme ovale à l'avance, puis utilisez l'outil tranche pour couper l'image))

style : L'attribut qui est défini dans la balise head> doit avoir :

1 position : relative. ;

2. Largeur et hauteur ;

3 Couleur de fond

4. Ligne de bordure (utilisée pour ajuster la position relative des quatre coins d'origine. Après ajustement, le la ligne de bordure peut être définieSupprimer )

Lors de la définition du CSS d'un petit calque, les attributs qui doivent être présents dans chaque calque sont :

1.position : absolue ;

2. Largeur et hauteur;

3. Attributs de direction (gauche, droite, bas, haut)

4.arrière-plan : url ("") sans répétition (introduisant des coins arrondis dans toutes les directions images)

Voici comment j'ai implémenté le code du cercle pour le rectangle de coin :

XML/HTML CodeCopier contenu dans le presse-papiers

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

Copier après la connexion

Remarque : le style CSS utilisé dans mon code est en ligne. Il existe trois styles CSS : en ligne, intégré et externe.

[Recommandations associées]

1. Tutoriel vidéo gratuit HTML

2 html réalise un tableau fixe autour et peut faire défiler vers le haut, en bas, à gauche et à droite

3. Explication détaillée des balises HTML couramment utilisées dans le développement front-end

4. Code HTML pur à réaliser. effet de défilement via la balise de sélection

5 Exemples de code de rédaction de CV personnel en HTML

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!