Maison > Article > interface Web > Comment utiliser le rayon de bordure en CSS

Comment utiliser le rayon de bordure en CSS

php中世界最好的语言original: 2017-11-23 11:30:592359parcourir

Aujourd'hui, je vais vous présenter border-radius, comment utiliser border-radius et les attributs de border-radius. Regardons un petit cas ci-dessous.

Mot arrondi DIVCSS3 : border-radius

Structure grammaticale

p{border-radius:5px}

Définir les quatre coins de la boîte de l'objet DIV à effet de coin arrondi de 5 pixels

p{border-radius:5px 0;}

Définissez les coins supérieur gauche et inférieur droit de la boîte d'objet DIV pour qu'ils soient arrondis de 5 pixels, le les autres coins sont 0 Pas de coins arrondis

p{border-radius:5px 5px 0 0;}

Définissez les coins supérieur gauche et supérieur droit de la zone d'objet DIV sur 5px arrondis, et les deux autres coins sont 0 et non arrondis

Description :

border-radius : 3px 4px 5px 6px

signifie définir le coin supérieur gauche de l'objet. aux coins arrondis de 3 px, le coin supérieur droit aux coins arrondis de 4 px, le coin inférieur droit aux coins arrondis de 5 px et le coin inférieur gauche aux coins arrondis de 3 px.

Cas des coins arrondis CSS3

Définissez des coins arrondis sur deux boîtes DIV et une image pour pratiquer les coins arrondis CSS3.

Code HTML du cas

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>对象圆角 在线演示 </title> 
<link href="images/style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<p>盒子左上角和右上角对象圆角测试</p> 
<p class="box">DIV盒子圆角</p> 
<p>盒子对象个角圆角测试</p> 
<p class="box3">DIV盒子圆角</p> 
<p> </p> 
<p>图片对象圆角测试</p> 
<p class="box2"><img src="images/logo.gif" /></p> 
</body> 
</html>

Code CSS du cas :

.box {border-radius:5px 5px 0 0;border:1px solid #000;width:300px; height:80px; margin:0 auto} 
.box2 img{border-radius:5px} 
.box3{border-radius:5px 0;  background:#999;width:300px; height:80px; margin:0 auto}

Description du cas

1), la première case BOX afin d'observer Pour l'effet de coin arrondi, le style de bordure est défini et le style de coin arrondi border-radius:5px 5px 0 0; définit les coins arrondis du coin supérieur gauche et du coin supérieur droit.

2), définissez la couleur d'arrière-plan de la deuxième boîte BOX3 et définissez le rayon de bordure du style des coins arrondis : 5px 0, définissez les coins arrondis du coin supérieur gauche et du coin inférieur droit

3 ), le troisième Définissez le style de coin arrondi border-radius:5px sur l'image img dans la zone box2 et définissez les quatre coins à arrondir.

Il y a tellement de connaissances sur border-radius. Les amis intéressés peuvent le faire eux-mêmes. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment utiliser border-radius en CSS

convertisseur d'édition HTML

Comment saisir des espaces 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!

Déclaration：

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

Article précédent：Style de tableau HTMLArticle suivant：Style de tableau HTML

Articles Liés

Voir plus