简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel HTML > le corps du texte

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

Étiquettes associées：
html
source：php.cn
Article précédent：HTML réalise un tableau fixe et peut faire défiler vers le haut, le bas, la gauche et la droite Article suivant：Explication détaillée de l'exemple de HTML utilisant Mailto pour implémenter la fonction d'envoi d'e-mails
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Conversion automatique PX en erreur REM  <style>html {   taille de police : calc(100vw / 3,75);      }body {    taille de la...
Depuis 2024-04-16 09:34:16
0
0
4687
La page ne peut soudainement plus extraire le CSS ou le bootstrap Je suis donc en train de développer une page, j'en ai fait une partie hier et ça a très bi...
Depuis 2024-04-06 21:58:04
0
1
800
Comment résoudre le mystérieux espace vide en bas de page en CSS J'essaie de créer une page Web simple en utilisant Bootstrap et D3, mais je ne sais pas co...
Depuis 2024-04-06 20:22:15
0
1
454
Comment utiliser les composants Laravel avec des espaces réservés paresseux Livewire Je souhaite ajouter le squelette de mon composant Laravel dans un espace réservé livewire3...
Depuis 2024-04-06 20:02:10
0
2
543
Méthode de niveau supérieur pour remplacer une chaîne par du code HTML (généré à partir d'un tableau) Étant donné une chaîne comme celle-ci...$htmlPattern="Usernameis:#name#andusercompany...
Depuis 2024-04-06 17:40:41
0
2
410
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！