Comment définir le style de bordure de div avec CSS-tutoriel CSS-php.cn

Comment définir le style de bordure de div avec CSS

青灯夜游

Libérer： 2023-01-05 16:10:21

original

9072 Les gens l'ont consulté

En CSS, vous pouvez utiliser l'attribut border-style pour définir le style de bordure d'un div. Il vous suffit d'ajouter le "border-style:attribut value;" à l'élément div. Les valeurs courantes pour l'attribut border-style sont : pointillé, pointillé, solide, etc.

Comment définir le style de bordure de div avec CSS

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

css définit le style de bordure de div

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div {
				margin: 10px 0;
			}
			
			div.dotted {
				border-style: dotted
			}
			
			div.dashed {
				border-style: dashed
			}
			
			div.solid {
				border-style: solid
			}
			
			div.double {
				border-style: double
			}
			
			div.groove {
				border-style: groove
			}
			
			div.ridge {
				border-style: ridge
			}
			
			div.inset {
				border-style: inset
			}
			
			div.outset {
				border-style: outset
			}
		</style>
	</head>

	<body>
		<div class="dotted">点状边框</div>

		<div class="dashed">虚线边框</div>

		<div class="solid">实线边框</div>

		<div class="double">双线边框</div>

		<div class="groove">3D 凹槽边框</div>

		<div class="ridge">3D 垄状边框</div>

		<div class="inset">3D inset 边框</div>

		<div class="outset">3D outset 边框</div>
	</body>

</html>

Copier après la connexion

Rendu :

Comment définir le style de bordure de div avec CSS

css Attribut border-style

L'attribut border-style est utilisé pour définir le style de toutes les bordures d'un élément, ou pour définir le style de bordure pour chaque côté individuellement.

Valeur de l'attribut :

值	描述
none	定义无边框。
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

(Partage de vidéos d'apprentissage : tutoriel vidéo CSS)

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!