Maison > interface Web > tutoriel CSS > Tutoriel de code CSS3 pour compléter un effet de coin arrondi de boîte carrée

Tutoriel de code CSS3 pour compléter un effet de coin arrondi de boîte carrée

Y2J
Libérer: 2017-05-22 11:28:15
original
2245 Les gens l'ont consulté

Cet exemple est CSS3 implémentant p coins arrondis. La phrase de code CSS3 pour implémenter les coins arrondis est : "border-radius: 20px;" Il doit être exécuté à l'aide d'un navigateur prenant en charge CSS3, tel que la nouvelle version de Chrome, Firefox ou IE9. IE6, 7 et 8 ne prennent pas en charge

Le code est le suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>CSS3实现p圆角 - CSS3教程 - 计划 - 博客园</title> 
<meta name="
key
words" content="www.jb51.net"/> 
<style type="text/css">
 #yuanjiao{ 
font-family: Arial; 
border: 2px solid #379082; 
border-radius: 20px; 
padding: 30px 30px; 
width: 330px; }
</style> 
</head> 
<body> 
<p id="yuanjiao">
Copier après la connexion

Cet exemple est CSS3 pour implémenter p coins arrondis. La phrase de code CSS3 pour implémenter les coins arrondis est : "border-radius: 20px;" Il doit être exécuté à l'aide d'un navigateur prenant en charge CSS3, tel que la nouvelle version de Chrome, Firefox ou IE9. IE6, 7 et 8 ne sont pas pris en charge.
Tutoriel Script House CSS3



>

Effet réel (veuillez utiliser un navigateur prenant en charge CSS3) :


Cet exemple est CSS3 implémentant p coins arrondis. La phrase de code CSS3 pour implémenter les coins arrondis est : "border-radius: 20px;" Il doit être exécuté à l'aide d'un navigateur prenant en charge CSS3, tel que la nouvelle version de Chrome, Firefox ou IE9. IE6, 7 et 8 ne sont pas pris en charge.

[Recommandations associées]

1.

Tutoriel vidéo gratuit CSS3

2

Vous apprendre à écrire des styles CSS de manière standardisée.

3.

Tutoriel sur l'utilisation de la validation des formulaires H5 et CSS3

4

Explication détaillée du code des bordures progressivement lumineuses via des pseudo-éléments CSS3.

5.

Explication détaillée du processus CSS3 complétant l'effet d'animation lowpoly des images

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:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal