html网页2_html边框综合属性-CSDN博客

本文链接：https://blog.csdn.net/2301_79956487/article/details/134277818

八，css盒子模型

以手机盒子为例，分析组成

所谓的盒子模型在HTML中就是一个盛装元素内容的容器。

每个盒子模型都由元素的内容（concent）、内边距（padding）、边框（border）和外边距（margin）组成。

1，盒子模型概述

<div>标记是一个块容器标记。

可以将网页分割为独立的部分，以实现网页的规划和布局。

大多数HTML标记都可以嵌套在<div>标记中，<div>中还可以嵌套多层<div>。

可以替代大多数的块级文本标记。

盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和

盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和

2，盒子模型相关属性

1), 边框属性

设置内容	样式属性	常用属性值
边框样式	border-style:上边 [右边下边左边];	none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线
边框宽度	border-width:上边 [右边下边左边];	像素值
边框颜色	border-color:上边 [右边下边左边];	颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)
综合设置边框	border:四边宽度四边样式四边颜色;
圆角边框	border-radius:水平半径参数/垂直半径参数;	像素值或百分比
图片边框	border-images:图片路径裁切方式/边框宽度/边框扩展距离重复方式;

1. border-style综合属性

border-style:solid ; /*四边均为实线*/
border-style:solid dotted ; /*上下实线、左右点线*/
border-style:solid dotted dashed; /*上实线、左右点线、下虚线*/

在设置边框宽度时，必须同时设置边框样式，如果未设置样式或设置为none，则不论宽度设置为多少都无效。 注意：常用取值单位为像素。

2. border-width综合属性

border-width:5px; /*四边宽度均为5像素*/
border-width:5px 3px ; /*上下边框5像素宽度、左右边框3像素宽度*/
border-width:5px 3px 4px; /*上边框5像素宽、左右边框3像素宽度、下边框4像素宽度*/

3.border-color综合属性

border-color:#f00; /*四边均为红色*/
border-color:#f00 #00f ; /*上下红色、左右蓝色*/
border-color:#f00 #00f #0f0; /*上红色、左右蓝色、下绿色*/

4. 也可以单独设置每个边框的颜色属性（border-color）

border-top-color
border-right-color
border-bottom-color
border-left-color

5. 边框综合属性（border）

border-top:上边框宽度样式颜色;

border-right:右边框宽度样式颜色;

border-bottom:下边框宽度样式颜色;

border-left:左边框宽度样式颜色;

border:四边宽度样式颜色;

注意：宽度、样式、颜色顺序任意，不分先后

6. 圆角边框属性 border-radius

1. 不带斜杠： border-radius: 50px;表示用半径是50像素的圆形，去叠加每个角，值可以是1个~4个。

2.带斜杠： border-radius:50px/100px; 表示用水平半径为50像素，垂直半径为100像素椭圆去叠加四个角

3.分比做为值也行，去叠加每个角。如果对象是个正方形，用50%值的结果是正圆型 border-radius:50%;

参考知识网址：https://www.runoob.com/cssref/css3-pr-border-radius.html

7. 图片边框属性 border-image

在网页设计中，有时需要对区域整体添加一个图片边框，运用border-image属性可以轻松实现这个效果。border-image:border-image-source border-image-slice/ border-image-width/ border-image-outset border-image-repeat;

<title>图片边框</title>
<style type="text/css">
	div{
		width:300px;
		height:300px;
		border-image-source:url(images/4.png); /*设置边框图片路径*/
		border-image-slice:33%;       /*边框图像顶部、右侧、底部、左侧内偏移量 切开。*/
		border-width:41px;            /*设置边框宽度*/
		border-image-outset:0;		  /*设置边框图像区域超出边框量 外凸*/
		border-image-repeat:repeat;	  /*设置图片平铺方式*/
		border-style:solid;           /*设置边框样式*/
		}
</style>
</head>
<body>
<div></div>

2), 内边距属性

padding不允许为负值

padding-top:上边距;

padding-right:右边距;

padding-bottom:下边距;

padding-left:左边距;

3), 外边距属性

允许使用负值

margin-top:上外边距;

margin-right:右外边距;

margin-bottom:下外边距;

margin-left:左外边距;

margin:四边外边距; margin:5px 3px 4px ；

！使用外边距，设置块元素居中对齐

当对块级元素应用宽度属性width，并将左右的外边距都设置为auto，可使块级元素水平居中，实际工作中常用这种方式进行网页布局。

margin:5px auto ； /* 利用margin实现块元素水平居中，并且上下拉开5像素边距*/

！默认内、外边距的清除

为了更方便地控制网页中的元素，制作网页时，通常先清除元素的默认内外边距。

*{ padding:0; /*清除内边距*/ margin:0; /*清除外边距*/ }

3), box-shadow属性--阴影

box-shadow:像素值1 像素值2 像素值3 像素值4 颜色值阴影类型;

参数值	说明
像素值1	表示元素水平阴影位置，可以为负值（必选属性）。
像素值2	表示元素垂直阴影位置，可以为负值（必选属性）。
像素值3	阴影模糊半径（可选属性）。清晰还是模糊。
像素值4	阴影扩展半径，不能为负值（可选属性）。阴影的面积大小。
颜色值	阴影颜色（可选属性）。
阴影类型	内阴影（inset 嵌入）/外阴影（默认）（可选属性）。阴影在对象的里面还是外面

box-shadow属性也可以改变阴影的投射方向以及添加多重阴影效果。

例如： box-shadow:5px 5px 10px 2px #999 inset,-5px -5px 10px 2px #333 inset;

4), box-sizing属性

定义盒子的宽度值和高度值是否包含元素的内边距和边框，其基本语法格式如下:

box-sizing: content-box/border-box;

content-box：当定义width和height时，它的参数值不包括border和padding。默认值。

border-box：当定义width和height时，border和padding的参数值被包含在width和height之内。

3，背景属性

1), background-color 背景颜色

background-color:背景颜色属性

rgb(r,g,b)，例：rgb(30,0,0)

2), background-image 背景图像

例如：h2{ background-image:url(images/5.jpg); }

3), 透明度

1.只设置颜色的不透明度的颜色值

RGBA函数值 rgba(r,g,b,alpha);

alpha的值:0~1之间。0完全透明，1完全不透明。

例如： p{ background-color:rgba(255 , 0 , 0 , 0.5); }

2.设置对象整体不透明度的属性

opacity：opacityValue;

opacity属性用于定义元素的不透明度，参数opacityValue表示不透明度的值，它是一个介于0~1之间的浮点数值。其中，0表示完全透明，1表示完全不透明，而0.5则表示半透明。

<style type="text/css">
#boxwrap{width:330px; margin:10px auto; border:solid 1px #FF6666;}
img:first-child{opacity:1;}
img:nth-child(2){opacity:0.8;}
img:nth-child(3){opacity:0.5;}
img:nth-child(4){opacity:0.2;}
</style>
</head>
<body>
<div id="boxwrap">
<img src="images/jingling.jpg" width="160" height="109">
<img src="images/jingling.jpg" width="160" height="109">
<img src="images/jingling.jpg" width="160" height="109">
<img src="images/jingling.jpg" width="160" height="109">
</div>
</body>

4), background-repeat 背景图像平铺

5), background-position 背景图像的位置

如果2个值都没有,默认是左上. 如果只给定一个值,另外一个值默认是center

6), background-attachment 背景图像固定

7), 设置背景图像的大小

background-size:属性值1 属性值2; 默认值：auto。

8), 设置背景的显示区域

background-origin 背景起源属性可以自行定义背景图像的相对位置。

在上面的语法格式中，background-origin属性有三种取值，分别表示不同的含义，具体解释如下。

padding-box：背景图像相对于内边距区域来定位。默认值。

border-box：背景图像相对于边框来定位。

content-box：背景图像相对于内容框来定位。

9), 设置背景图像的裁剪区域

background-clip裁剪属性用于定义背景图像的裁剪区域

在语法格式上，background-clip属性和background-origin 属性的取值相似，但含义不同，具体解释如下。

border-box：默认值，从边框区域向外裁剪背景，意思是只保留从边框开始到里面的。

padding-box：从内边距区域向外裁剪背景。

content-box：从内容区域向外裁剪背景。

10), 设置多重背景图像

通过background-image、background-repeat、background-position和background-size等属性提供多个属性值可以实现多重背景图像效果，各属性值之间用逗号隔开。

例如：background-image: url(images/caodi.png), url(images/taiyang.png), url(images/tiankong.png);

<style type="text/css">
div{
	width:300px;
	height:300px;
	border:1px dotted #999;
	background-image:url(images/caodi.png),url(images/taiyang.png),url(images/tiankong.png);
	background-repeat:no-repeat;
	background-position:bottom,right top,center;
	}
</style>
</head>
<body>
<div>设置多重背景图像</div>
</body>

11), 背景复合属性

CSS中的背景属性也是一个复合属性，可以将背景相关的样式都综合定义在一个复合属性background中。

多学一招：使用背景图像属性定义列表样式

list-style是一个复合属性，用于控制列表项目符号的样式。在实际网页制作过程中，为了更高效地控制列表项目符号，通常将属性值定义为list-style：none，用于不显示项目符号，然后为<li>设置背景图像的方式实现不同的列表项目符号效果。

<style type="text/css">
div{
	width:200px;
	height:200px;
	border:5px dashed #B5FFFF;
	padding:25px;
	background:#B5FFFF url(images/caodi.png) no-repeat left bottom padding-box;
	}
</style>
</head>
<body>
<div>走过红尘的纷扰，弹落灵魂沾染的尘埃，携一抹淡淡的情怀，迎着清馨的微风，坐在岁月的源头，看时光婆娑的舞步，让自己安静在时间的沙漏里，感受淡如清风，静若兰的唯美。</div>
</body>

4，CSS3渐变属性

1), 线性渐变

起始颜色会沿着一条直线按顺序过渡到结束颜色。运用CSS3中的

background-image:linear-gradient（参数值）;

background-image:linear-gradient(渐变角度,颜色值1,颜色值2...,颜色值n);

渐变角度指水平线和渐变线之间的夹角，可以是以deg为单位的角度度数。

颜色值用于设置渐变颜色，其中“颜色值1”表示起始颜色，“颜色值n”表示结束颜色，起始颜色和结束颜色之间可以添加多个颜色值，各颜色值之间用“,”隔开。

<style type="text/css">
div{width:200px;height:200px;
	background-image:linear-gradient(0deg,red,#00F);}

2), 径向渐变

起始颜色会从一个中心点开始，依据椭圆或圆形形状进行扩张渐变。

background-image:radial-gradient(渐变形状圆心位置,颜色值1,颜色值2...,颜色值n);

background-image: radial-gradient(渐变形状圆心位置,颜色值1,颜色值2...,颜色值n);

渐变形状用来定义径向渐变的形状，其取值即可以是定义水平和垂直半径的像素值或百分比，也可以是相应的关键词。 circle ; ellipse

圆心位置用于确定元素渐变的中心位置，使用“at”加上关键词或参数值来定义径向渐变的中心位置。

“颜色值1”表示起始颜色，“颜色值n”表示结束颜色，起始颜色和结束颜色之间可以添加多个颜色值，各颜色值之间用“,”隔开。

3), 重复渐变

在CSS3中，通过“background-image:repeating-linear-gradient（参数值）;”样式可以实现重复线性渐变的效果。

background-image:repeating-linear-gradient(渐变角度,颜色值1,颜色值2...,颜色值n);

在CSS3中，通过“background-image:repeating-radial-gradient（参数值）;”样式可以实现重复线性渐变的效果。

background-image:repeating-radial-gradient(渐变形状圆心位置,颜色值1,颜色值2...,颜色值n);