Expliquer comment définir la bordure, l'arrière-plan et la taille des éléments en CSS3

Bordure

Les attributs liés à la bordure sont les suivants.

border-width

est utilisé pour définir la largeur de la bordure. Les options incluent :
1)  : modifier la valeur. largeur de la bordure Définit la valeur de longueur exprimée en unités de mesure CSS (telles que em, px, cm) ;
2) : Définissez la valeur de la largeur de la bordure sur le pourcentage de la largeur de la zone de dessin de la bordure ;
3) Mince, moyenne et épaisse : définissez la largeur de la bordure sur la largeur par défaut. La signification spécifique de ces trois valeurs est définie par le navigateur. représenté par les trois valeurs augmente une fois, et la bordure La valeur par défaut pour la largeur est moyenne.

border-style

est utilisé pour définir le style utilisé pour dessiner la bordure, qui peut être l'une des valeurs suivantes.
1) aucun : pas de bordure, valeur par défaut
2) pointillé : bordure en pointillés
3) pointillé : ligne de points border;
4) groove : bordure de ligne de rainure
5) inset : une bordure qui donne au contenu de l'élément un effet en ligne ;
6) début : une bordure qui donne au contenu de l'élément un effet convexe
7) crête : bordure de crête
8) solide : bordure pleine ; .
border-color

Définit la couleur de la bordure.

Définissez le style de bordure pour un bord spécifique

bord supérieur

border-top-width
border -top-style
border-top-colorbottom

border-bottom-width
border-bottom - style
border-bottom-colorleft

border-left-width
border-left-style
border-left-colorright

border-right-width
border-right-style
border-right-color
Abréviation

border:

border-top-right-radius

border-bottom-left-radius
border- bottom-right-radius

Définit un coin arrondi. Une paire de valeurs de longueur ou de pourcentages liées à la largeur et à la hauteur de la zone de bordure.
border-radius

Définit quatre coins à la fois. Une paire ou quatre de valeurs de longueur ou de pourcentage, séparées par le caractère /.

Arrière-plan

p {
	border: medium solid black;
}
#first {
	border-radius: 20px / 15px;
}
#second {
	border-radius: 50% 20px 25% 5em / 25% 15px 40px 55%
}

Couleur et image d'arrière-plan

Vous pouvez définir la couleur, l'image, la taille et la paix pour le arrière-plan de l'élément La méthode de mosaïque est la suivante :

background-repeat prend en charge les valeurs d'attribut suivantes :

1) répétition-x : mosaïque de l'image horizontalement, l'image peut être tronquée

p {
	border: medium solid black;
	background-color: lightgray;
	background-image: url(banana.png);
	background-size: 40px 40px;
	background-repeat: repeat-x;
}

2) répétition : mosaïque l'image verticalement, l'image peut être tronquée
3) répétition : mosaïque l'image ; horizontalement et verticalement en même temps, l'image peut être tronquée ;
4) espace : mosaïquez l'image horizontalement ou verticalement, mais définissez un espacement uniforme entre les images pour garantir que l'image n'est pas tronquée ;
5) rond : mosaïque l'image horizontalement ou verticalement, mais ajustez la taille de l'image pour garantir que l'image ne soit pas tronquée
6) non-répétition : interdire ; images en mosaïque.
background-size prend en charge les valeurs d'attribut suivantes :
1) contain : redimensionner l'image proportionnellement afin que la plus grande de sa largeur et de sa hauteur coïncide avec le conteneur horizontalement ou verticalement, l'image d'arrière-plan est toujours incluse dans le conteneur ;

2) couvrir : redimensionner l'image proportionnellement pour que l'image recouvre au moins le conteneur, et puisse dépasser le conteneur 3) auto :Valeur par défaut, l'image est entièrement affichée dans sa propre taille.

设置背景图像位置

background-position属性设置背景图像的位置。

p {
	border: 10px double black;
	background-color: lightgray;
	background-image: url(banana.png);
	background-size: 40px 40px;
	background-repeat: no-repeat;
	background-position: 30px 10px;
}

background-position属性的值包括：
1）top：将背景图像定位到盒子顶部边界；
2）left：将背景图像定位到盒子左边界；
3）right：将背景图像定位到盒子右边界；
4）bottom：将背景图像定位到盒子底部边界；
5）center：将背景图像定位到中间位置。

元素背景的附着方式

当元素具有滚动条时，使用background-attachment属性可以控制背景的附着方式。支持的属性值包括：
1）fixed：背景固定到视窗上，即内容滚动时背景不动；
2）local：背景附着到内容上，即背景随内容一起滚动；
3）scroll：背景固定到元素上，不会随内容一起滚动。

背景图像的开始位置和裁剪样式

background-origin属性指定背景颜色和背景图像应用的位置。支持的属性值包括：
1）border-box：在边框盒子内部绘制背景颜色和背景图像；
2）padding-box：在内边距盒子内部绘制背景颜色和背景图像；
3）content-box：在内容盒子内部绘制背景颜色和背景图像。

background-clip属性决定了背景的哪一部分是可见的，裁剪盒子之外的部分一律被丢弃，不会显示。支持的属性值同上。

简写方式

可以使用background简写属性在一条声明中设置所有的背景值：
background:

阴影

使用box-shadow属性可以为元素的盒子添加阴影效果。支持的属性值如下：
1）hoffset：阴影的水平偏移量，是一个长度值，正值代表阴影向右偏移，负值代表阴影向左偏移；
2）voffset：阴影的垂直偏移量，是一个长度值，正值代表阴影位于元素盒子下方，负值代表阴影位于元素盒子上方；
3）blur：（可选）模糊值，是一个长度值，值越大盒子的边界越模糊。默认值0，边界清晰；
4）spread：（可选）阴影的延伸半径，是一个长度值，正值代表阴影向盒子各个方向延伸扩大，负值代表阴影沿相反方向缩小；
5）color：（可选）设置阴影的颜色，如果省略，浏览器会自行选择一个颜色；
6）inset：（可选）将外部阴影设置为内部阴影（内嵌到盒子中）。
可以一次设置多个阴影，使用逗号分隔：

p {
	border: 10px double black;
	box-shadow: 5px 4px 10px 2px gray, 4px 4px 6px gray inset;
}

轮廓

轮廓是可选的，轮廓的用处是在短时间内抓住用户对某个元素的注意力，轮廓绘制在盒子边框的外面，边框和轮廓的最大的区别是：轮廓不属于页面，因此应用轮廓不需要调整页面布局。轮廓的属性包括：
1）outline-color：设置外围轮廓的颜色；
2）outline-offset：长度值，设置轮廓距离元素边框边缘的偏移量；
3）outline-style：设置轮廓样式，同border-style的值；
4）outline-width：设置轮廓的宽度，包括：thin、medium、thick和长度值；
5）ouline：在一条生命中设置轮廓的所有属性（ ）。

元素的边距

元素的内边距

元素的内边距是元素内容和边框之间的空白，内边距有如下属性，值都为长度值或者百分数：
1）padding-top：为顶边设置内边距；
2）padding-right：为右边设置内边距；
3）padding-bottom：为底边设置内边距；
4）padding-left：为左边设置内边距；
5）padding：简写属性，同时设置所有边的内边距。

p {
	border: 10px solid black;
	background: lightgray;
	border-radius: 1em 4em 1em 4em;
	padding: 5px 25px 5px 40px;
}

元素的外边距

元素的外边距是元素边框和页面上围绕在它周围的所有东西之间的空白区域，外边距有如下属性，值都为长度值或者百分数：
1）margin-top：为顶边设置外边距；
2）margin-right：为右边设置外边距；
3）margin-bottom：为底边设置外边距；
4）margin-left：为左边设置外边距；
5）margin：简写属性，在一条声明中设置所有边的外边距。

img {
	border: 4px solid black;
	background: lightgray;
	padding: 4px;
	margin: 4px 20px;
}

元素的大小

CSS提供了控制元素尺寸的属性，这些属性可以使用的值为auto、长度值或者百分数。auto表示让浏览器设置元素的宽度和高度。

设定区域

box-sizing属性指定尺寸样式应用到元素盒子的具体区域，取值包括：
1）content-box：尺寸设置仅应用到内容区域；
2）pading-box：尺寸设置应用到pading区域；
3）border-box：尺寸设置应用到border区域；
4）margin-box：尺寸设置应用到margin区域。

最小和最大尺寸

min-width和max_width属性为浏览器调整尺寸设置一定的限制。

img {
	background: lightgray;
	border: 4px solid black;
	margin: 2px;
	box-sizing: border-box;
	min-width: 100px;
	width: 50%;
	max_width: 200px;
}

内容溢出

如果元素的尺寸过大，无法完全显示在元素的内容盒中，目前有3个属性用于控制内部溢出部分的处理方式：
1）overflow-x：设置水平方向的溢出方式；
2）overflow-y：设置垂直方向的溢出方式；
3）overflow：同时设置水平方向和垂直方向的溢出方式。
3个属性支持的属性值如下：
1）auto：浏览器自行处理溢出内容；
2）hidden：多余的部分直接剪掉，只显示内容盒里面的内容；
3）no-content：如果内容无法全部显示，就直接移除，大部分浏览器都不支持；
4）no-display：如果内容无法全部显示，就隐藏所有内容，大部分浏览器都不支持；
5）scroll：为内容添加滚动条，即使内容没有溢出也能看到滚动条；
6）visible：默认值，不管是否溢出内容盒，都显示元素效果。

p {
	width: 200px;
	height: 100px;
	border: medium double black;
}
#first {overflow: hidden;}
#second {overflow: scroll;}

元素的可见性

使用visibility属性可以控制元素的可见性，支持的属性值如下：
1）collapse：元素不可见，且在页面布局中不占据空间；
2）hidden：元素不可见，但在页面布局中占据空间；
3）visible：默认值，可见。

元素的盒类型

display属性提供了一种改变元素盒类型的方式，这会改变元素在页面上的布局方式。该属性的常用值如下，不包括弹性盒子、表格和ruby注释相关的属性：
1）inline：盒子显示为文本行中的字；
2）block：盒子显示为段落；
3）inline-block：盒子显示为文本行；
4）list-item：盒子显示为列表项；
5）run-in：盒子类型取决于周围的元素；
6）none：元素不可见，且在页面布局中不占空间。

浮动

float属性设置元素的浮动样式，可选择包括：
1）left：移动元素，使其左边界挨着包含块的左边界，或者另一个浮动元素的右边界；
2）right：移动元素，使其右边界挨着包含块的右边界，或者另一个浮动元素的左边界；
3）none：元素位置固定。

p.toggle{
	float: left;
	border: medium double black;
	width: 40%;
	margin: 2px;
	padding: 2px;
}

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!