HTML练习之路15(播放器效果)
本次要完成如图所示的拼图效果：通过不同线性渐变的数量可以确定最少需要三个容器，由于本题没有任何素材，所以白色圆形和黑色三角形都需要自制，所以我们的框架可以是五个盒子依次包裹，并且在制定盒子时依次定义类名，方便在CSS中针对具体某个<div>进行操作：<body><div class="father"><div class="son1"><div
本次要完成如图所示的拼图效果：
通过不同线性渐变的数量可以确定最少需要三个容器，由于本题没有任何素材，所以白色圆形和黑色三角形都需要自制，所以我们的框架可以是五个盒子依次包裹，并且在制定盒子时依次定义类名，方便在CSS中针对具体某个<div>进行操作：
<body>
<div class="father">
<div class="son1">
<div class="son2">
<div class="son3">
<div class="son4"></div>
</div>
</div>
</div>
</div>
</body>接下来我们采用链入式引入CSS文件，需要我们新建CSS文件并保存后，然后在<title>标签下书写以下代码：
<link href="test_bofangqi.css" rel="stylesheet" type="text/css">其中，href的属性值为新建的CSS文件位置。
来到CSS文件，首先，我们初始化浏览器的边距，让我们接下来的操作不受浏览器默认的边距影响。
*{
padding: 0;
margin: 0;
}我们对父盒子进行操作，根据目标效果图可知，我们的父盒子主要是提供一个显示范围，并且设置有线性渐变：
首先，我们给父盒子一个显示范围（一般宽高的设置都需要设置边框，否则设置无效），并且利用margin值复制的原则将我们的父盒子居中（值复制原则：当后面跟两个值时，第一个值用于上下边框，第二个值用于左右边框）：
width: 300px;
height: 300px;
border: 1px solid #444;
margin: 20px auto;接下来我们设置线性渐变，并设置内边距（为接下来的子盒子确定显示范围）
background-image: linear-gradient(to top,#91576F,#CCAAC9,#62426C);
padding: 100px;
这里插一嘴，说一下关于颜色的选择，我们在选择颜色时可能发现无论怎么选择都与目标颜色有一定差距，这时我们可以使用color相关属性值中的颜色选择器：
然后用右下角的吸管吸取我们需要的颜色，就能得到我们需要的颜色：
演示效果如下：
接下来对第一个子盒子进行设置：
通过查看目标效果图，我们可以知道第一个子盒子主要是提供一个显示范围，并设置有一个上下走向的线性渐变，值得注意的是第一个子盒子的四个角还设置了圆角。
首先，我们为第一个子盒子设置显示范围，由于第一个盒子设置了内边距，所以我们直接将宽高都设置为100%，并赋予边框：
.son1{
width: 100%;
height: 100%;
border: 1px solid #0D0B0B;
}接下来，我们为第一个子盒子设置线性渐变，并设置圆角：
background-image: linear-gradient(to top,#492646,#915176); /*设置线性渐变*/
border-radius: 10%; /*设置圆角*/效果如下：
接下来对第二个子盒子进行设置：
第二个子盒子主要也是提供一个显示范围，设置有线性渐变，并且四个角都设置了圆角：
首先我们给第二个子盒子一个显示范围，并设置边框，再将其居中（此处距离上下两边的距离需要不断去调试）：
.son2{
width: 60%;
height: 50%;
border: 17px solid #0D0B0B; /*这里设置17px是为了满足题目边框宽度的需求*/
margin: 60px auto;
}
接下来和第一个子盒子一样，设置线性渐变和圆角：
background-image: linear-gradient(to top,#A85A67,#F4A993); /*设置线性渐变*/
border-radius: 10%; /*设置圆角*/效果图如下：
接下来对第三个子盒子进行设置：
根据目标效果图的效果看，我们的第三个子盒子主要是显示一个白色的圆形。
首先，我们给盒子一个显示范围和边框（虽然我们设置的圆形理论上宽高都百分比应设置相同，但迫于圆形的父边框是一个矩形，所以高度略大于设置的宽度），并将其居中：
.son3{
width: 50%;
height: 60%;
border: 1px solid #FFFFFF; /*注意：边框颜色为白色*/
margin: 20px auto;
}接下来，我们设置圆角并给一个白色的背景色：
border-radius: 50%; /*50%为圆角的临界值，圆角会直接变成圆形*/
background: #FFFFFF; /*根据题目要求，背景色为白色*/实际效果如下：
接下来对第四个子盒子进行设置：
第四个盒子主要是显示一个黑色的三角形，我们可以通过边框的设置达到目标效果。
此处我们不用给他显示范围，直接定义边框即可（注意：边框颜色要为白色，否则会遮挡后面设置的颜色，达不到我们的目标效果）。
border: 30px solid #fff;接下来，我们对左边框设置相同宽度的黑色边框，对右侧设置为无边框，设置完后我们的黑色播放按钮就成形了：
border-left: 30px solid #000;
border-right: none;最后，将其设置居中即可：
margin: 20px 38px;实际效果如下：
完整.html参考源码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>播放器</title>
<link href="test_bofangqi.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="father">
<div class="son1">
<div class="son2">
<div class="son3">
<div class="son4"></div>
</div>
</div>
</div>
</div>
</body>
</html>
完整.css参考源码如下：
@charset "utf-8";
/* CSS Document */
*{
padding: 0;
margin: 0;
}
.father{
width: 300px;
height: 300px;
border: 1px solid #444;
margin: 20px auto;
background-image: linear-gradient(to top,#91576F,#CCAAC9,#62426C);
padding: 100px;
}
.son1{
width: 100%;
height: 100%;
border: 1px solid #0D0B0B;
background-image: linear-gradient(to top,#492646,#915176);
border-radius: 10%;
}
.son2{
width: 60%;
height: 50%;
margin: 60px auto;
border: 17px solid #0D0B0B;
background-image: linear-gradient(to top,#A85A67,#F4A993);
border-radius: 10%;
}
.son3{
width: 50%;
height: 60%;
margin: 20px auto;
border: 1px solid #ffffff;
border-radius: 50%;
background: #FFFFFF;
}
.son4{
border: 30px solid #fff;
border-left: 30px solid #000;
border-right: none;
margin: 20px 38px;
}如果你认为我的分享还不错，欢迎加入我们的大家庭一起学习，无限进步。
（QQ群：937864538 欢迎入群~）
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
4
0- 0
已为社区贡献2条内容
所有评论(0)