Erklären Sie, wie Sie den Rahmen, den Hintergrund und die Größe von Elementen in CSS3 festlegen

Rand

Die mit dem Rand verbundenen Attribute sind wie folgt.

border-width

wird verwendet, um die Breite des Rahmens festzulegen:
1) : Ändern Sie den Rahmenbreite Auf den in CSS-Maßeinheiten ausgedrückten Längenwert (z. B. em, px, cm) einstellen. : Stellen Sie den Rahmenbreitenwert auf den Prozentsatz der Breite von ein der Rahmenzeichnungsbereich;
3) Dünn, mittel und dick: Stellen Sie die Rahmenbreite auf die Standardbreite ein. Die spezifische Bedeutung dieser drei Werte wird vom Browser definiert dargestellt durch die drei Werte ​​erhöht sich einmal, und der Rand Der Standardwert für die Breite ist mittel.
border-style

wird verwendet, um den Stil festzulegen, der zum Zeichnen des Rahmens verwendet wird. Dies kann einer der folgenden Werte sein.

1) keine: kein Rand, Standardwert;
2) gestrichelt: gestrichelter Rand; Rand;
4) Groove: Groove-Linienrand;
5) Einschub: ein Rand, der dem Elementinhalt einen Inline-Effekt verleiht;
6) Anfang: ein Rand, der dem Elementinhalt einen konvexen Effekt verleiht;
7) Grat: Gratrand; 8) fest: fester Rand .
border-color
Legt die Farbe des Rahmens fest.
Legen Sie den Rahmenstil für eine bestimmte Kante fest
obere Kante

border-top-width

border -top-style

border-top-color

bottom

border-bottom-width
border-bottom - Stil
border-bottom-colorleft

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

border-right-width
border-right-style
border-right-color

Abkürzung
border:
Rand-oben:

Rand-unten:

Rand links:

Rand rechts:
Abgerundeter Rand
border-top-left-radius
border-top-right-radius border-bottom-left-radiusborder- Bottom-Right-Radius
Legt eine abgerundete Ecke fest. Ein Paar Längenwerte oder Prozentwerte, die sich auf die Breite und Höhe des Rahmenfelds beziehen.
border-radius

Legt vier Ecken gleichzeitig fest. Ein Paar oder vier Längenwerte oder Prozentwerte, getrennt durch das Zeichen /.

Hintergrund

Hintergrundfarbe und -bild

Sie können Farbe, Bild, Größe und Frieden festlegen der Hintergrund des Elements Die Kachelmethode ist wie folgt:

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

background-repeat unterstützt die folgenden Attributwerte:

1) repeat-x: Tile the Bild horizontal, das Bild wird möglicherweise abgeschnitten;

2) wiederholen: Das Bild vertikal kacheln, das Bild wird möglicherweise abgeschnitten; Bild gleichzeitig horizontal und vertikal, das Bild kann abgeschnitten werden;

4) Abstand: Ordnen Sie das Bild horizontal oder vertikal an, legen Sie jedoch einen gleichmäßigen Abstand zwischen den Bildern fest, um sicherzustellen, dass das Bild nicht abgeschnitten wird ;

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

5) rund: Das Bild horizontal oder vertikal kacheln, aber die Bildgröße anpassen, um sicherzustellen, dass das Bild nicht abgeschnitten wird
6) keine Wiederholung: verbieten Sie gekachelte Bilder.
background-size unterstützt die folgenden Attributwerte:
1) enthalten: Skalieren Sie das Bild proportional, sodass der größere Wert von Breite und Höhe horizontal oder horizontal mit dem Container übereinstimmt vertikal ist das Hintergrundbild immer im Container enthalten
2) Abdeckung: Skalieren Sie das Bild proportional, sodass das Bild mindestens den Container abdeckt und möglicherweise über den Container hinausgeht >
3) auto :Standardwert, das Bild wird vollständig in seiner eigenen Größe angezeigt.

设置背景图像位置

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;
}

Das obige ist der detaillierte Inhalt vonErklären Sie, wie Sie den Rahmen, den Hintergrund und die Größe von Elementen in CSS3 festlegen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!