标签：CSS3 颜色 渐变 元素 HTML HTML5 background 图像 属性
css盒子模型
盒子模型概述
所谓的盒子模型在HTML中就是一个盛装元素内容的容器。
每个盒子模型都由元素的内容、内边距 （padding）、边框（border）和外边距（margin）组成。
<div>标记
<div>标记是一个块容器标记。
可以将网页分割为独立的部分，以实现网页的规划和布局。
大多数HTML标记都可以嵌套在<div>标记中，<div>中还可以嵌套多层<div>。
可以替代大多数的块级文本标记。
盒子的宽与高
盒子模型的总宽度与总高度
盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和
盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和
盒子模型的相关属性
CSS:hover 属性
选择鼠标指针浮动在其上的元素，并设置其样式：
如：
a:hover
{
background-color:yellow;
}
边框属性
设置内容 样式属性 常用属性值
边框样式 border-style:上边 [右边 下边 左边]; none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线
边框宽度 border-width:上边 [右边 下边 左边]; 像素值
边框颜色 border-color:上边 [右边 下边 左边]; 颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)
综合设置边框 border:四边宽度 四边样式 四边颜色;
圆角边框 border-radius:水平半径参数/垂直半径参数; 像素值或百分比
图片边框 border-images:图片路径 裁切方式/边框宽度/边框扩展距离 重复方式;
| 属性 | 说明 |
|---|---|
| border-image-source | 指定图片的路径 |
| border-image-slice | 指定边框图像顶部、右侧、底部、左侧内偏移量。 |
| border-image-width | 指定边框宽度 |
| border-image-outset | 指定边框背景向盒子外部延伸的距离。 |
| border-image-repeat | 指定背景图片的平铺方式 |
注意：宽度、样式、颜色顺序任意，不分先后
border:宽度,样式,颜色
内边距属性
内边距（内填充）
padding可设置为上下左右边距分别为top,bottom,left,right
注意：内边距padding不允许使用负值
外边距属性
外边距（margin）
与内边距一样可设置上下左右边距
注意：和内边距不同，外边距margin允许使用负值
当对块级元素应用宽度属性width，并将左右的外边距都设置为auto，可使块级元素水平居中
如：
margin:0 auto /* 利用margin实现块元素水平居中*/
margin:5px auto /* 利用margin实现块元素水平居中，并且上下拉开5像素边距*/
内外边距清除
为了更方便地控制网页中的元素，制作网页时，通常先清除元素的默认内外边距。
格式为：
*{
padding:0; /清除内边距/
margin:0; /清除外边距/
}
box-shadow属性
CSS3中的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;
box-sizing属性
box-sizing属性用于定义盒子的宽度值和高度值是否包含元素的内边距和边框，其基本语法格式如下:
box-sizing: content-box/border-box;
content-box：浏览器对盒模型的解释遵从W3C 标准，当定义width和height时，它的参数值不包括border和padding。
border-box：当定义width和height时，border和padding的参数值被包含在width和height之内。
背景属性
设置背景颜色
在CSS中，网页元素的背景颜色使用background-color属性来设置
设置背景图像
在CSS中，还可以将图像作为网页元素的背景，通过background-image属性实现。
背景与图片不透明度的设置
通过引入RGBA模式和opacity属性，可以设置图片的不透明度。
RGBA模式
rgba(r,g,b,alpha);
例如：使用RGBA模式为p元素指定透明度为0.5，颜色为红色的背景。
p{background-color:rgba(255,0,0,0.5);}
opacity属性
opacity：opacityValue;
opacity属性用于定义元素的不透明度，参数opacityValue表示不透明度的值，它是一个介于0~1之间的浮点数值。其中，0表示完全透明，1表示完全不透明，而0.5则表示半透明。
设置背景图像平铺
默认情况下，背景图像会自动向水平和竖直两个方向平铺。如果不希望背景图像平铺，或者只沿着一个方向平铺，可以通过background-repeat属性来控制。
background-repeat图像平铺属性
| 平铺属性值 | 含义 |
|---|---|
| repeat | 沿水平和竖直两个方向平铺（默认值） |
| no-repeat | 不平铺（图像位于元素的左上角，只显示一次） |
| repeat-x | 只沿水平方向平铺 |
| repeat-y | 只沿竖直方向平铺 |
设置背景图像位置
background-position图像位置属性
| 位置属性取值 | 含义 |
|---|---|
| 单位数值 | 设置图像左上角在元素中的坐标，例如background-position:20px 20px; |
| 预定义的关键字 | 水平方向值：left、center、right。 |
| 垂直方向值：top、center、bottom。 | |
| 百分比 | 0% 0% ：图像左上角与元素的左上角对齐。 |
| 50% 50%：图像50% 50%中心点与元素50% 50%的中心点对齐。 | |
| 20% 30%：图像20% 30%的点与元素20% 30%的点对齐。 | |
| 100% 100%：图像右下角与元素的右下角对齐，而不是图像充满元素。 |
设置背景图像固定
background-attachment图像固定属性
| 固定属性取值 | 含义 |
|---|---|
| scroll | 图像随页面元素一起滚动（默认值）。 |
| fixed | 图像固定在屏幕上，不随页面元素滚动。 |
设置背景图像大小
运用CSS3中的background-size属性可以轻松控制背景图像的大小。
background-size:属性值1 属性值2;
| 属性值 | 说 明 |
|---|---|
| 像素值 | 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会默认为auto； |
| 百分比 | 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会默认为auto； |
| cover | 把背景图像扩展至足够大，使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中； |
| contain | 把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域； |
设置背景的显示区域
运用CSS3中的background-origin属性可以自行定义背景图像的相对位置。
background-origin:属性值;
在上面的语法格式中，background-origin属性有三种取值，分别表示不同的含义，具体解释如下。
padding-box：背景图像相对于内边距区域来定位。
border-box：背景图像相对于边框来定位。
content-box：背景图像相对于内容框来定位。
设置背景图像的裁剪区域
在CSS样式中，background-clip属性用于定义背景图像的裁剪区域
background-clip:属性值;
在语法格式上，background-clip属性和background-origin 属性的取值相似，但含义不同，具体解释如下。
border-box：默认值，从边框区域向外裁剪背景。
padding-box：从内边距区域向外裁剪背景。
content-box：从内容区域向外裁剪背景。
设置多重背景图像
在CSS3中，通过background-image、background-repeat、background-position和background-size等属性提供多个属性值可以实现多重背景图像效果，各属性值之间用逗号隔开。
如：
background-image:
url(images/caodi.png),
url(images/taiyang.png),
url(images/tiankong.png);
背景复合属性
CSS中的背景属性也是一个复合属性，可以将背景相关的样式都综合定义在一个复合属性background中。
background:
[background-color]
[background-image]
[background-repeat]
[background-attachment]
[background-position]
[background-size]
[background-clip]
[background-origin];
使用背景图像属性定义列表样式
list-style是一个复合属性，用于控制列表项目符号的样式。在实际网页制作过程中，为了更高效地控制列表项目符号，通常将list-style的属性值定义为none，然后通过为<li>设置背景图像的方式实现不同的列表项目符号。
渐变属性
线性渐变
在线性渐变过程中，起始颜色会沿着一条直线按顺序过渡到结束颜色。运用CSS3中的 “background-image:linear-gradient（参数值）;”样式可以实现线性渐变效果。
background-image:linear-gradient(渐变角度,颜色值1,颜色值2…,颜色值n);
linear-gradient用于定义渐变方式为线性渐变，括号内用于设定渐变角度和颜色值。
渐变角度
渐变角度指水平线和渐变线之间的夹角，可以是以deg为单位的角度数值或关键词。
颜色值
颜色值用于设置渐变颜色，其中“颜色值1”表示起始颜色，“颜色值n”表示结束颜色，起始颜色和结束颜色之间可以添加多个颜色值，各颜色值之间用“,”隔开。
径向渐变
径向渐变是网页中另一种常用的渐变，在径向渐变过程中，起始颜色会从一个中心点开始，依据椭圆或圆形形状进行扩张渐变。运用CSS3中的“background-image:radial-gradient（参数值）;”样式可以实现径向渐变效果
background-image:radial-gradient(渐变形状 圆心位置,颜色值1,颜色值2…,颜色值n);
radial-gradient用于定义渐变的方式为径向渐变，括号内的参数值用于设定渐变形状、圆心位置和颜色值。
渐变形状
渐变形状用来定义径向渐变的形状，其取值即可以是定义水平和垂直半径的像素值或百分比，也可以是相应的关键词。
圆心位置
圆心位置用于确定元素渐变的中心位置，使用“at”加上关键词或参数值来定义径向渐变的中心位置。
颜色值
“颜色值1”表示起始颜色，“颜色值n”表示结束颜色，起始颜色和结束颜色之间可以添加多个颜色值，各颜色值之间用“,”隔开。
重复渐变
在网页设计中，经常会遇到在一个背景上重复应用渐变模式的情况，这时就需要使用重复渐变。
重复线性渐变
在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);
补充知识点：
盒模型：组成部件：外边距+边框+内边距+内容。
IE盒模型和标准盒模型切换：
box-sizing:border-box;
元素分类：
块级元素：
1.每个块级元素都从新的一行开始，并且其后的元素也另起一行（即自动换行）。
2.元素的高度，宽度，行高以及顶和底边距都可设置。
3.元素宽度在不设置的情况下，是它本省父容器100%（和父元素的宽度一致），除非设定一个宽度。
<div> <p> <h1>~<h6> <ol> <ul> <dl> <address> <blockquote> <from>以及列表标签的等等。
行内元素（内联元素）：
1.和其他元素都在一行上。
2.元素的高度，宽度，行高以及顶部和底部边距不可设置。
3.元素的宽度就是它包含的文字或图片的宽度，不可改变。
<a> <span> <br/> <i> <em> <strong> <label>
行内块元素：
1.和其他元素都在一行上。
2.元素的高度，宽度，行高以及顶和底边距都可设置。
<img> <input>
元素分类转换
display
block:将内联元素或行内块元素转换为块级元素
inline：将其他元素转换为行内元素（内联元素）
inline-block：将其他元素转为行内块元素
none：将其他元素隐藏
标签：CSS3,颜色,渐变,元素,HTML,HTML5,background,图像,属性 来源： https://blog.csdn.net/weixin_51227348/article/details/123045879
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。