阿ken的HTML、CSS的入门指南（八）_CSS盒子模型

请叫我阿ken
1,756 阅读9分钟

这是我参与 8 月更文挑战的第 5 天，活动详情查看： 8月更文挑战

感激相遇 你好 我是阿ken

作者：请叫我阿ken
链接：juejin.cn/user/109118…
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

🌊🌈关于前言：

文章部分内容及图片出自网络，如有问题请与我本人联系(主页介绍中有公众号)

本博客暂适用于刚刚接触HTML以及好久不看想要复习的小伙伴

635A80DAB32FE1D1585C92B2AD92A0C1.gif

    面对大河 我无限惭愧

    我年华虚度 空有一身疲倦

              海子《以梦为马》

🌊🌈关于内容：

5.3.10  设置多重背景图像

在CSS3之前的版本中，一个容器只能填充一张背景图片，如果重复设置， 后设置的背景图片将覆盖之前的背景。CSS3中增强了背景图像的功能，允许一个容器里显示多个背景图像。使背景图像效果更容易控制。但是 CSS3中并没有为实现多背景图片提供对应的属性，而是通过background-image、background-repeat、background-position和background-size等属性提供多个属性值来实现多重背景图像效果，各属性值之间用逗号隔开。

案例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置背景图像的裁切位置</title>
<style type="text/css">

div{
width: 300px;
height: 300px;
border: lpx dotted #999;
background-image:
url(#),
url(#),
url(#);
background-repeat:no-repeat;
background-position:bottom,right top,center;
}

</style>
</head>
<body>

<div>设置多重背景图像</div>

</body>
</html>

首先通过background-image属性定义了 3张背景图，然后设置背景图的平铺方式为“no-repeat”，最后通过background-position属性分别设置3张背景图片的位置。其中"bottom"等价于"bottom center"用于设置草地的位置，"right top"用于设置太阳的位置，"center"等价于"center center"用于设置天空的位置。

5.3.11  背景复合属性(background)

同边框属性一样， 在CSS中背景属性也是一个复合属性，可以将背景相关的样式都综合定义在一个复合属性background中。使用background属性综合设置背景样式的语法格式如下:

background:[background-color] [background-image] 
[background-repeat][background-attachment] 
[background-position] [background-size] 
[background-clip] [background-origin];

在上面的语法格式中，各个样式顺序任意，对于不需要的样式可以省略。

案例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>背景复合属性</title>
<style type="text/css">

div {
width:200px;
height:200px;
border:5px dashed #B5FFFF;
padding:25px;
background:#B5FFFF url(#) no-repeat left bottom padding-box;
}

</style>
</head>
<body>

<div>走过红尘的纷扰，弹落灵魂沾染的尘埃，携携抹谈淡的情怀。</div>

</body>
</html>

运用背景复合属性为div定义了背景颜色、背景图片、图像平铺方式、背景图像位置及裁剪区域等多个属性。

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

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

案例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>背景属性定义列表项目符号</title>.
<style type="text/css">

li{
list-style:none;/*清除列表的默认样式*/
height:26px;
line-height:26px;
background:url(images/book.png) no-repeat left center; /*为li设置背景图像*/
padding-left:25px;
}

</style>
</head>
<body>

<h2>传智播客学科</h2>
<ul>
<li>网页平面</li>
<li>Java</li>
<li>PHP</li>
<li>.NET</li>
</u1>

</body>
</html>

定义了一个无序列表，其中第8行代码通过"list-style:none;"清除列表的默认显示样式，第11行代码通过为<li>设置背景图像的方式来定义列表项目符号。
每个列表项前都添加了列表项目图像，如果需要调整列表项目图像只需更改<li>的背景样式即可。

5.4  CSS3渐变属性

CSS3的渐变属性主要包括线性渐变和径向渐变。

5.4.1  线性渐变

在线性渐变过程中，起始颜色会沿着一条直线按顺序过渡到结束颜色。
运用CSS3中的"background-image: linear-gradient (参数值); "样式可以实现线性渐变效果，

基本语法格式如下:

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

在上面的语法格式中，Iinear-gradient用于定义渐变方式为线性渐变，括号内用于设定渐变角度和颜色值，具体解释如下：

  • 渐变角度
    渐变角度指水平线和渐变线之间的夹角，可以是以 deg 为单位的角度数值或“to"加"left” ”right“ ”top“ ”bottom“等关键词。在使用角度设定渐变起点的时候，odeg 对应“to top"，90deg对应“to right", 1800deg对应“to bottom", 270deg对应"to left"，整个过程是以 bottom 为起点顺时针旋转。

    当未设置渐变角度时，会默认为"180deg" 等同于"to bottom”。

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

    案例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>线性渐变</title>
<style type="text/ess">

div{
width:200px;
height:200px;
background-image:linear-gradient(30deg,#0f0,#00F);
}
/*为 div 定义了一个渐变角度为 30deg、绿色(#0f0)到蓝色(#00f)的线性渐变。*/

</style>
</head>
<body>

<div></div>

</body>
</html>

上述代码实现了绿色到蓝色的线性渐变。值得一提的是，在每一个颜色值后面还可出写一个百分比数值，用于标示颜色渐变的位置，具体示例代码如下:

background-image;linear-gradient (30deg,#0f0 50%,#00F 80%);

在上面的示例代码中，可以看做绿色(#0f0)由50%的位置开始出现渐变至蓝色(#00F) 位于80%的位置结束渐变。可以用Photoshop中的渐变色块进行类比。

5.4.2  径向渐变

径向渐变是网页中另一种常用的渐变，在径向渐变过程中，起始颜色会从一个中心点开始，依据椭圆或圆形形状进行扩张渐变。
运用CSS3中的“background-image:radial-gradient(参数值);”样式可以实现径向渐变效果，

基本语法格式如下:

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

在上面的语法格式中，radial-gadient用于定义渐变的方式为径向渐变，括号内的参数值用于设定渐变形状、圆心位置和颜色值。

对各参数的具体介绍如下：

  1. 渐变形状

    渐变形状用来定义径向渐变的形状，其取值既可以是定义水平和垂直半径的像素值或百分比，也可以是相应的关键词。其中关键词主要包括两个值“circle" 和ellipse"。\

    具体解释如下：

    ● 像素值/百分比: 用于定义形状的水平和垂直半径，如“80px 50px" 表示一个水平半径为80px,垂直半径为50px的椭圆形。

    ● circle: 指定圆形的径向渐变。

    ● ellipse: 指定椭圆形的径向渐变。

  2. 圆心位置

    圆心位置用于确定元素渐变的中心位置，使用“at"加上关键词或参数值来定义径向渐变的中心位置。该属性值类似于CSS中background-position属性值，如果省略则默认为“center"。该属性值主要有以下几种：

    ● 像素值/百分比: 用于定义圆心的水平和垂直坐标，可以为负值。

    ● left: 设置左边为径向渐变圆心的横坐标值。

    ● center: 设置中间为径向渐变圆心的横坐标值或纵坐标。

    ● right: 设置右边为径向渐变圆心的横坐标值。

    ● top: 设置顶部为径向渐心的纵标值。

    ● bottom: 设置底部为径向渐变圆心的纵标值。

  3. 颜色值

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

    案例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>径向渐变</title>
<style type="text/css">

div{
width:200px;
height:200px;
border-radius:50%;/*设置圆角边框*/
background-image:radial-gradient(ellipse at center, #Of0,#030);/*设置径向渐变*/
}

</style>
</head>
<body>

<div></div>

</body>
</html>

为div定义了一个渐变形状为椭圆形，径向渐变位置在容器中心点，绿色(#0f0)到深绿色(#030)的径向渐变;同时使用"border-radius" 属性将容器的边框设置为圆角。

值得一提的是，同“线性渐变”类似，在“径向渐变”的颜色值后面也可以书写一个百分比数值，用于设置渐变的位置。

5.4.3  重复渐变

在网页设计中，经常会遇到在一个背景上重复应用渐变模式的情况，这时就需要使用重复渐变。重复渐变包括重复线性渐变和重复径向渐变，具体解释如下：

1. 重复线性渐变

在CSS3中，通过"background-image：repeating-Iinear-gradient (参数值);"样式可以实现重复线性渐变的效果，

基本语法格式如下：

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

在上面的语法格式中，"repeating-linear-gradient(参数值)"用于定义渐变方式为重复线性渐变，括号内的参数取值和线性渐变相同，分别用于定义渐变角度和颜色值。

案例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>重复线性渐变</title>
<style type="text/css">

div{
width:200px;
height:200px;
background image: repeating-linear-gradient(90deg,#E50743,#E8ED30 10%,#3FA62E 15%);
}

</style>
</head>
<body>

<div></div>

</body>
</html>

为div定义了一个渐变角度为 90deg，红黄绿三色的重复线性渐变。

2. 重复径向渐变

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

基本语法格式如下:

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

在上面的语法格式中，"repeating-radial-gradient(参数值)”用于定义渐变方式为为重复径向改变，括号内的参数取值和径向渐变相同，分别用于定义渐变形状、圆心位置和颜色值。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>重复径向渐变</tit1e>
<style type="text/css">

div{
width:200px;
height:200px;
border-radius:50%;
background-image:repeating-radial-gradient(circle at 50% 50%,
#E50743, #E8ED30 10%,#3FA62E 15%);
}

</style>
</head>
<body>

<div></div>

</body>
</html>

为div定义了一个个渐变形状为圆形，径向渐变位置在容器中心点，红、黄、绿三色径向渐变。



今日入门学习暂时告一段落

Peace

🌊🌈往期回顾：

阿ken的HTML、CSS的入门指南(一)_HTML基础
阿ken的HTML、CSS的入门指南(二)_HTML页面元素和属性
阿ken的HTML、CSS的入门指南(三)_文本样式属性
阿ken的HTML、CSS的入门指南(四)_CSS3选择器
阿ken的HTML、CSS的入门指南(五)_CSS盒子模型
阿ken的HTML、CSS的入门指南(六)_CSS盒子模型
阿ken的HTML、CSS的入门指南(七)_CSS盒子模型
阿ken的HTML、CSS的入门指南(八)_CSS盒子模型
阿ken的HTML、CSS的入门指南(九)_浮动与定位
阿ken的HTML、CSS的入门指南(十)_浮动与定位
阿ken的HTML、CSS的入门指南(十一)_浮动与定位

🌊🌈关于后记：

感谢阅读，希望能对你有所帮助 博文若有瑕疵请在评论区留言或在主页个人介绍中添加联系方式私聊我 感谢每一位小伙伴不吝赐教

原创不易，「点赞」+「评论」 谢谢支持❤

avatar
文章
阅读
粉丝
相关推荐
css选择器优先级顺序是什么？css基本选择器优先级的介绍
1.4k阅读
 · 
0点赞
《30分钟重学HTML》之基础-超链接与URI（四）
625阅读
 · 
5点赞
CSS/CSS3常考面试题总结（长更）
618阅读
 · 
6点赞
阿ken的HTML、CSS的入门指南（七）_CSS盒子模型
1.9k阅读
 · 
109点赞
CSS思维导图
264阅读
 · 
1点赞
CSS垂直居中的七个方法
10k阅读
 · 
120点赞
怪异盒模型和标准盒模型的区别
717阅读
 · 
0点赞
面试题：HTML+CSS
5.3k阅读
 · 
37点赞
关于前端position属性和display属性，这篇文章已足够
1.8k阅读
 · 
8点赞

友情链接：