Explain how to set the border, background and size of elements in CSS3

Border

The properties related to the border are as follows.

border-width

is used to set the width of the border. Options include:
1) d87ff7208865521bd0197cc9f1bc8b07: change the border width Set to the length value expressed in CSS measurement units (such as em, px, cm);
2) 7b00143dd59180b172f17ef191e0b736: Set the border width value to the percentage of the width of the border drawing area;
3) Thin, medium and thick: Set the border width to the default width. The specific meaning of these three values ​​​​is defined by the browser. The width represented by the three values ​​​​increases once, and the border The default value for width is medium.

border-style

is used to set the style used to draw the border, which can be any of the following values.
1) none: no border, default value;
2) dashed: dashed border;
3) dotted: Dot line border;
4) groove: groove line border;
5) inset: a border that makes the element content have an inline effect;
6) outset: a border that makes the element content have a convex effect;
7) ridge: ridge border;
8) solid: Solid border.

border-color

Set the color of the border.

Set the border style for a specific side

Top edge
border-top-width
border -top-style
border-top-color
Bottom
border-bottom-width
border-bottom- style
border-bottom-color
left
border-left-width
border-left-style
border-left-color
right
border-right-width
border-right-style
border-right-color

Abbreviation

##border: bce2caab046d6d80a3ab2dbbed585544 1c2c742169d7b9c78be48923999b6fc0 5275270f2d75787ee7654275985cc94f
border-top: 7926e1144dbe031104a80b35bed1b7c9 c9ccee2e6ea535a969eb3f532ad9fe89 b10fb37415d019cfffa8c4d7366c607f
border-bottom: 7926e1144dbe031104a80b35bed1b7c9
border-left: bce2caab046d6d80a3ab2dbbed585544 1c2c742169d7b9c78be48923999b6fc0 5275270f2d75787ee7654275985cc94f
border-right: 8494feee8239a7721afc6e52cd92ca9e 1c2c742169d7b9c78be48923999b6fc0 5275270f2d75787ee7654275985cc94f

Rounded Border

border-top-left-radius

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

Set a rounded corner. A pair of length values ​​or percentage values ​​that relate to the width and height of the border box. border-radius

Set four corners at a time. A pair or four of length values ​​or percentage values, separated by the / character.

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

Background

Background color and image

You can set the color, image, size and tiling method for the background of the element , as follows:

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

background-repeat supports the following attribute values:

1) repeat-x: Tile the image horizontally, and the image may be truncated;
2) repeat-y: tile the image vertically, the image may be truncated;
3) repeat: tile the image horizontally and vertically at the same time, the image may be truncated;
4) space: Tile the image horizontally or vertically, but set a uniform spacing between images to ensure that the image is not truncated;
5) round: Tile the image horizontally or vertically, but adjust the image size to ensure that the image is not truncated;
6) no-repeat: Disable tiled images.

background-size supports the following attribute values:

1) contain: scale the image proportionally so that the larger of its width and height coincides with the container horizontally or vertically , the background image is always included in the container;
2) cover: scale the image proportionally so that the image at least covers the container, and may exceed the container;
3) auto :Default value, the image is fully displayed in its own size.

设置背景图像位置

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: 3729847adc21d233c93cf6a5091946f9 bbd38e49954c1aadc8c0de08d5a96f04 dd3ddbf4710f6838d1886e99e7e1ded7 28f8ba1f4008d4680e28d8e1a2b93277 af840263aef1ced65c5763187397ca24 95c004b630034c7c1ff938152673a9c7 8f60fed95f18a55ff96691cb8c6b302f 7cd4e7f9dfa9fb9dd854bc89d002adf5

阴影

使用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：在一条生命中设置轮廓的所有属性（6a51c234445238b1086bb6cd01116418 b9af1eb14abb22702b7e37951d41b4e1 aeed8893f82f06a326658806eca6bb17）。

元素的边距

元素的内边距

元素的内边距是元素内容和边框之间的空白，内边距有如下属性，值都为长度值或者百分数：
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;
}

The above is the detailed content of Explain how to set the border, background and size of elements in CSS3. For more information, please follow other related articles on the PHP Chinese website!