内容简介：原文链接：我喜欢用奇怪的编程思想挑战自己。这是获得乐趣和学习新事物的好方法。这次的挑战是使用一个空经过大量的试验和错误，我最终得到了这个。
原文链接： 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做一个芝士汉堡》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Data Structures and Algorithm Analysis in Java
Mark A. Weiss / Pearson / 2011-11-18 / GBP 129.99
Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course wa......一起来看看 《Data Structures and Algorithm Analysis in Java》 这本书的介绍吧!
