内容简介：原文链接：我喜欢用奇怪的编程思想挑战自己。这是获得乐趣和学习新事物的好方法。这次的挑战是使用一个空经过大量的试验和错误，我最终得到了这个。
原文链接： www.lesscake.com/cheeseburge…
我喜欢用奇怪的编程思想挑战自己。这是获得乐趣和学习新事物的好方法。这次的挑战是使用一个空 div 在 CSS 中绘制一个芝士汉堡。
经过大量的试验和错误，我最终得到了这个。
这可能不是有史以来最好看的汉堡，但对我来说是印象最深刻的。这表明我们有可能用一个 div 绘制像这样复杂的东西。
在本文中，我们将一步步制作这种芝士汉堡。
HTML
HTML 非常简短：一个字符集，一个标题，一个 CSS 文件的链接，以及一个 div 。
<！DOCTYPE html>
<HTML>
<HEAD>
<meta charset =“UTF-8”>
<TITLE> Cheesburger </ TITLE>
<link rel =“stylesheet”href =“style.css”/>
</ HEAD>
<BODY>
<div class =“burger”> </ div>
</ BODY>
</ HTML>
复制代码
这就是全部了！现在我们将把注意力集中在 style.css 文件上。
CSS
汉堡最基本的 CSS 可能看起来像这样。
.burger {
/ *包含汉堡的所有部分* /
/ *包子，奶酪，肉，生菜和芝麻* /
}
复制代码
但是这太有限了，我们将无法在单个选择器内安装整个汉堡。要找到更多空间，我们应该使用 ：before 和 ：after 伪元素。
.burger {
/*奶酪，肉，生菜 */
}
.burger:before {
/* 面包 */
}
.burger:after {
/* 芝麻 */
}
复制代码
这可能看起来不多，但这对我们的目的来说已经足够了。
面包
小圆面包由两部分组成：上面一层和下面一层。所以我们必须找到一种方法在一个 CSS 选择器中绘制 2 个不同的形状，这并不复杂。
我们首先使用 border 属性绘制 2 个矩形。
.burger:before {
content: "";
display: block;
/* 两片面包见的距离 */
width: 400px;
height: 55px;
/* 上层面包 */
border-top: 80px solid #f5b230;
/* 下层面包 */
border-bottom: 50px solid #f5b230;
}
复制代码
然后我们使用 border-radius 来很好地弯曲面包。
.burger:before {
/* 和之前同样的代码 */
content: "";
display: block;
width: 400px;
height: 55px;
border-top: 80px solid #f5b230;
border-bottom: 50px solid #f5b230;
/* 新内容 */
border-radius: 30% 30% 20% 20%;
}
复制代码
佐料
接下来，我们将添加主要的汉堡佐料：奶酪，肉和生菜。这次我们需要将 3 个形状放在一个 CSS 选择器中。
我们现在就把重点放在肉上。
.burger {
/* 尺寸 */
width: 380px;
height: 40px;
/* 颜色和形状 */
background-color: #681f24;
border-radius: 15px;
}
复制代码
嗯，那不是很好，有一些肉，但不在正确的位置。不幸的是，我们不能使用 margin 或 padding 来解决这个问题，因为它会移动整个汉堡，而不仅仅是牛排。
那尝试些不同的东西：用 box-shadow 画出肉。
.burger {
/ *与以前相同* /
/ *我们刚刚删除了背景颜色* /
width: 380px;
height: 40px;
border-radius: 15px;
/* 新内容 */
/* 参数 左外边距, 顶部外边距, 颜色 */
box-shadow: 10px 85px #681f24;
}
复制代码
这样可行！然而，我们面临另一个问题：我们如何在同一个 CSS 选择器中添加奶酪和生菜？要解决这个问题，我们需要确认两件事：
CSS
所以...我们只需添加更多的盒子阴影！
.burger {
/* 与之前相同的代码 */
width: 380px;
height: 40px;
border-radius: 15px;
/* 新的盒子阴影 */
box-shadow:
10px 50px #fddb28,
/* 奶酪 */
10px 85px #681f24,
/* 肉类 */
10px 120px #82af15;
/* 生菜 */
}
复制代码
请注意，阴影的顺序很重要，因为第一个阴影的顺序靠前，会出现在其他阴影的前面。
芝麻
我们的汉堡正在形成，但它目前看起来很像热狗。我们应该通过在顶部面包中添加一些芝麻来解决这个问题。
首先，我们用 box-shadow 画一粒芝麻。
.burger:after {
content: "";
display: block;
/* 尺寸和形状 */
width: 10px;
height: 6px;
border-radius: 40%;
/* 位置和颜色 */
box-shadow: 100px -165px #ffffff;
}
复制代码
然后我们通过使用许多框阴影复制它。
.burger:after {
/* 保持之前的代码 */
content: "";
display: block;
width: 10px;
height: 6px;
border-radius: 40%;
/* 添加新的盒子阴影 */
box-shadow:
/* 顶行 */
100px -165px #ffffff,
160px -165px #ffffff,
230px -165px #ffffff,
290px -165px #ffffff,
/* 底行 */
60px -135px #ffffff,
125px -135px #ffffff,
190px -135px #ffffff,
255px -135px #ffffff,
330px -135px #ffffff;
}
复制代码
更好看的奶酪
如果我们能让奶酪看起来更像奶酪就更好了。例如，通过显示奶酪切片的一个角。这意味着即使已经使用了所有 CSS 选择器，我们还要画一个新的图形（一个黄色的三角形）。
如果我们仔细查看我们的代码，我们会注意到目前为止我们还没有使用 content 属性。让我们看看当我们在其中添加字符 ▾ 时会发生什么。
.burger:before {
/* 改变 content 标签 */
content: "▾";
/* ▾ 的颜色和尺寸 */
color: #fddb28;
font-size: 120px;
/* 其他保持相同 */
}
复制代码
margin or
padding
来解决这个问题。
但是通过一些 CSS 技巧，我们将完成它。
.burger:before {
/* 在三角形前添加八个空格 */
content: " ▾";
/* 空格会显示在 content 中*/
white-space: pre;
/* 垂直放置 ▾ */
line-height: 25px;
/* 保持其他不变 */
}
复制代码
现在我们完成了我们的芝士汉堡。
彩蛋
当我给朋友发送关于我这次挑战的邮件时，她回答了这个聪明的答案。
.burger:before {
content: ":hamburger:";
font-size: 100px;
}
复制代码
这样可以减少 CSS ，从而获得更好的效果。
结论
我用单个 div 和一些 CSS 设法实现的目标给我留下了深刻的印象。 当然使用 SVG 会更有意义，但那里的乐趣在哪里呢？
以上所述就是小编给大家介绍的《【译】通过css，用一个div做一个芝士汉堡》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
程序员代码面试指南：IT名企算法与数据结构题目最优解（第2版）
左程云 / 电子工业出版社 / 109.00元
《程序员代码面试指南：IT名企算法与数据结构题目最优解（第2版）》是一本程序员代码面试"神书”！书中对IT名企代码面试各类题目的最优解进行了总结，并提供了相关代码实现。针对当前程序员面试缺乏权威题目汇总这一痛点，本书选取将近300道真实出现过的经典代码面试题，帮助广大程序员的面试准备做到接近万无一失。"刷”完本书后，你就是"题王”！《程序员代码面试指南：IT名企算法与数据结构题目最优解（第2版）》......一起来看看 《程序员代码面试指南：IT名企算法与数据结构题目最优解（第2版）》 这本书的介绍吧!
