CSS3에서 요소의 테두리, 배경 및 크기를 설정하는 방법 설명

Border

border와 관련된 속성은 다음과 같습니다.

border-width

은 테두리 너비를 설정하는 데 사용됩니다. 옵션은 다음과 같습니다.
1) a37672519ade27bda735326e2a02a41e: CSS 측정 단위(예: em, px, cm) 길이 값;
2) 7b00143dd59180b172f17ef191e0b736: 테두리 그리기 영역 너비의 백분율로 테두리 너비 값을 설정합니다.
3) 가늘게, 중간, 두껍게: 테두리 너비를 기본값으로 설정합니다. 이 세 가지 값의 구체적인 의미는 브라우저에서 정의합니다. 세 가지 값으로 표시되는 너비는 한 번에 증가합니다.

border-style

은 테두리를 그리는 데 사용되는 스타일을 설정하는 데 사용되며 다음 값 중 하나일 수 있습니다.
1) 없음: 테두리 없음, 기본값;
2) 점선: 점선 테두리;
4) 홈: 홈이 있는 테두리; 요소 내용에 인라인 효과를 주는 테두리
6) 요소 내용에 볼록 효과를 주는 테두리
7) 능선: 능선 테두리; .
border-color
테두리 색상을 설정합니다.
특정 측면의 테두리 스타일 설정

top-edge

border-top-width

border-top-style

border-top-color
bottom-border
border-bottom -너비
테두리 하단 스타일
테두리 하단 색상
왼쪽
테두리 왼쪽 너비
테두리 왼쪽 스타일
테두리 왼쪽 색상
오른쪽
테두리 -right- width
border-right-style
border-right-color
Abbreviation

border: c9ccee2e6ea535a969eb3f532ad9fe89b10fb37415d019cfffa8c4d7366c607f

border-top: 7926e1144dbe031104a80b35bed1b7c9 c9ccee2e6ea535a969eb3f532ad9fe89

border-bottom: c9ccee2e6ea535a969eb3f532ad9fe89

border-left: b10fb37415d019cfffa8c4d7366c607f
border-right: 7926e1144dbe031104a80b35bed1b7c9 c9ccee2e6ea535a969eb3f532ad9fe89 b10fb37415d019cfffa8c4d7366c607f
둥근 테두리
border-top-left-radius
border -top-right-radiusborder-bottom-left-radius border-bottom-right-radius

둥근 모서리를 설정하세요. 테두리 상자의 너비와 높이에 관련된 길이 값 또는 백분율 값의 쌍입니다.
border-radius

네 모서리를 한 번에 설정하세요. / 문자로 구분된 한 쌍 또는 네 개의 길이 값 또는 백분율 값입니다.

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

Background

배경 색상 및 이미지

다음과 같이 요소 배경의 색상, 이미지, 크기 및 타일링 방법을 설정할 수 있습니다.

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

Background-repeat는 다음 속성 값을 지원합니다.

1) 반복 -x: 이미지를 수평으로 타일링하며, 이미지가 잘릴 수 있습니다.

2) 반복-y: 이미지를 수직으로 타일링하고, 이미지가 잘릴 수 있습니다.

3) 반복: 이미지를 타일링합니다. 가로 및 세로로 동시에 이미지가 잘릴 수 있습니다.
4) 공간: 이미지를 가로 또는 세로로 배열하되, 이미지가 잘리지 않도록 이미지 사이에 균일한 간격을 설정합니다.
5) 둥글게; : 이미지를 수평 또는 수직으로 타일링하지만 이미지가 잘리지 않도록 이미지 크기를 조정합니다.
6) no-repeat: 이미지 타일링을 비활성화합니다.
background-size는 다음 속성 값을 지원합니다.
1) 포함: 이미지의 너비와 높이 중 더 큰 부분이 가로 또는 세로로 컨테이너와 일치하도록 이미지 크기를 비례적으로 조정하고 배경 이미지가 항상 컨테이너에 포함됩니다. ;
2) 표지: 이미지가 최소한 컨테이너를 덮고 컨테이너를 초과할 수 있도록 이미지 크기를 조정합니다.

3) 자동: 기본값, 이미지가 자체 크기로 완전히 표시됩니다.

设置背景图像位置

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

위 내용은 CSS3에서 요소의 테두리, 배경 및 크기를 설정하는 방법 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!