论坛 › 马黑黑教程专版 › 水吧飞行器

马黑黑 发表于 2023-3-28 12:44

水吧飞行器

<style>
#mydiv {
        margin: 100px auto;
        width: 100px;
        height: 120px;
        border-style: solid;
        border-color: transparent transparent hsla(120, 70%,50%, .25) transparent;
        border-width: 20px 120px 120px 120px;
        border-radius: 50%;
        box-shadow: 10px 20px 30px green inset, -10px -20px 40px green inset;
        position: relative;
}
</style>

<div id="mydiv"></div>

马黑黑 发表于 2023-3-28 12:45

代码
<style>
#mydiv {
        margin: 100px auto;
        width: 100px;
        height: 120px;
        border-style: solid;
        border-color: transparent transparent hsla(120, 70%,50%, .25) transparent;
        border-width: 20px 120px 120px 120px;
        border-radius: 50%;
        box-shadow: 10px 20px 30px green inset, -10px -20px 40px green inset;
        position: relative;
}
</style>

<div id="mydiv"></div>

马黑黑 发表于 2023-3-28 12:51

主体部分（上部）的背景色由 box-shadow 内阴影渲染而成；下部由 border 构造出来。

这个飞行器完全符合空气动力学原理，假若真的要飞行，一度电就可以从地球飞到月球。

红影 发表于 2023-3-28 13:27

很奇特，就这么几句代码就能弄出这个形状来，想象里应该画出来要用很多代码才是{:4_203:}

红影 发表于 2023-3-28 13:37

那个三角形是怎样跑到边框下边的呢，而且border-radius: 50%;作用上去也这么奇特。

梦油 发表于 2023-3-28 15:13

好像是个子弹头

马黑黑 发表于 2023-3-28 17:13

红影 发表于 2023-3-28 13:27
很奇特，就这么几句代码就能弄出这个形状来，想象里应该画出来要用很多代码才是

代码很少的。但要丰富它，代码也少不了多少，比如加螺旋桨、加动画什么的

马黑黑 发表于 2023-3-28 17:14

梦油 发表于 2023-3-28 15:13
好像是个子弹头

子弹头的形状其实就是充分考虑了如何最有效地避开空气阻力

马黑黑 发表于 2023-3-28 17:16

红影 发表于 2023-3-28 13:37
那个三角形是怎样跑到边框下边的呢，而且border-radius: 50%;作用上去也这么奇特。

这个你要慢慢品了。这是个巨大的border，你可以设置每个方向的border为有效颜色，查看效果。

马黑黑 发表于 2023-3-28 17:17

红影 发表于 2023-3-28 13:27
很奇特，就这么几句代码就能弄出这个形状来，想象里应该画出来要用很多代码才是

其实这不叫三角形，叫扇形，也很像菇凉的裙子{:4_170:}

梦油 发表于 2023-3-28 17:24

马黑黑 发表于 2023-3-28 17:14
子弹头的形状其实就是充分考虑了如何最有效地避开空气阻力

是的，有道理。减少阻力，增加速度。

马黑黑 发表于 2023-3-28 17:58

梦油 发表于 2023-3-28 17:24
是的，有道理。减少阻力，增加速度。

没错

梦油 发表于 2023-3-28 20:12

马黑黑 发表于 2023-3-28 17:58
没错

你想的真周全。

红影 发表于 2023-3-28 21:01

马黑黑 发表于 2023-3-28 17:13
代码很少的。但要丰富它，代码也少不了多少，比如加螺旋桨、加动画什么的

这么点代码就出来了，真都很神奇。

马黑黑 发表于 2023-3-28 21:02

红影 发表于 2023-3-28 21:01
这么点代码就出来了，真都很神奇。

自己有空研究一下

马黑黑 发表于 2023-3-28 21:04

梦油 发表于 2023-3-28 20:12
你想的真周全。

一般般

红影 发表于 2023-3-28 21:45

马黑黑 发表于 2023-3-28 17:16
这个你要慢慢品了。这是个巨大的border，你可以设置每个方向的border为有效颜色，查看效果。

我对border的理解有误，一直以为是是边线向内的矩形，实际它是骑在线上的，而且本身就是三角形。当其余三遍透明，它直接显示为三角形。去搜了半天，才模模糊糊有点感觉了。再加上margin: 100px ，我大概知道它为什么在下面了。

红影 发表于 2023-3-28 21:48

马黑黑 发表于 2023-3-28 17:16
这个你要慢慢品了。这是个巨大的border，你可以设置每个方向的border为有效颜色，查看效果。

我知道你为什么说这个是个巨大的border了，因为120实际是240

红影 发表于 2023-3-28 22:13

马黑黑 发表于 2023-3-28 17:16
这个你要慢慢品了。这是个巨大的border，你可以设置每个方向的border为有效颜色，查看效果。

好吧，前一个回复收回，我又弄错了，刚发现，边框是向外延展的，是从中间的框往外走的。
嗯，现在终于弄明白了。之前一直不明白那个三角形为什么在方框下面，是因为我之前的理解都是错的。{:4_189:}

马黑黑 发表于 2023-3-28 22:36

红影 发表于 2023-3-28 22:13
好吧，前一个回复收回，我又弄错了，刚发现，边框是向外延展的，是从中间的框往外走的。
嗯，现在终于弄 ...

边框就是本体之外的东东，这个好理解的

查看完整版本: 水吧飞行器