在CSS3中设置元素的边框、背景和大小的方法讲解

ringa_lee

发布时间：2017-10-15 10:47:15

3225人浏览过

来源于php中文网

原创

边框

和边框相关的属性如下。

border-width

用于设置边框的宽度，可选择包括：
1）：将边框宽度设为以CSS度量单位（如em、px、cm）表达的长度值；
2）：将边框宽度值设为边框绘制区域的宽度的百分数；
3）thin、medium和thick：将边框宽度设为预设宽度，这三个值的具体意义是由浏览器定义，三个值代表的宽度一次增大，边框宽度的默认值是medium。

border-style

用于设置绘制边框使用的样式，可以是下列值的任意一个。
1）none：没有边框，默认值；
2）dashed：破折线式边框；
3）dotted：圆点线式边框；
4）groove：槽线式边框；
5）inset：使元素内容具有内嵌效果的边框；
6）outset：使元素内容具有外凸效果的边框；
7）ridge：脊线边框；
8）solid：实线边框。

border-color

设置边框的颜色。

为特定边设置边框样式

顶边
border-top-width
border-top-style
border-top-color
底边
border-bottom-width
border-bottom-style
border-bottom-color
左边
border-left-width
border-left-style
border-left-color
右边
border-right-width
border-right-style
border-right-color

简写方式

border:
border-top:
border-bottom:
border-left:
border-right:

圆角边框

border-top-left-radius
border-top-right-radius
border-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%
}

背景

背景颜色和图像

可以为元素的背景设置颜色、图像、大小和平铺方式，如下：

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

background-repeat支持如下属性值：
1）repeat-x：水平方向平铺图像，图像可能被截断；
2）repeat-y：垂直方向平铺图像，图像可能被截断；
3）repeat：水平和垂直方向同时平铺图像，图像可能被截断；
4）space：水平或者垂直方向平铺图像，但在图像与图像之间设置统一间距，确保图像不被截断；
5）round：水平或者垂直方向平铺图像，但调整图像大小，确保图像不被截断；
6）no-repeat：禁止平铺图像。

background-size支持如下属性值：
1）contain：等比例缩放图像，使其宽度、高度中较大者与容器横向或纵向重合，背景图像始终包含在容器内；
2）cover：等比例缩放图像，使图像至少覆盖容器，有可能超出容器；
3）auto：默认值，图像以本身尺寸完全显示。

设置背景图像位置

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

css背景重复background-repeat控制技巧

如何使用CSS实现Flex容器布局_Flex容器属性详解与实战

css工具Animate.css实现动画效果

css引入方式与浏览器兼容性问题

css选择器对不同浏览器的兼容性问题