我喜歡用奇怪的程式設計思想挑戰自己。這是獲得樂趣和學習新事物的好方法。這次的挑戰是使用乙個空div在css中繪製乙個芝士漢堡。
經過大量的試驗和錯誤，我最終得到了這個。
這可能不是有史以來最好看的漢堡，但對我來說是印象最深刻的。這表明我們有可能用乙個div繪製像這樣複雜的東西。
在本文中，我們將一步步製作這種芝士漢堡。
html
<！doctype html>
cheesburger
複製**
style.css檔案上。
css漢堡最基本的
css可能看起來像這樣。
.burger
複製**
.burger
.burger:before
.burger:after
複製**
麵包小圓麵包由兩部分組成：上面一層和下面一層。所以我們必須找到一種方法在乙個
css選擇器中繪製 2 個不同的形狀，這並不複雜。
我們首先使用border屬性繪製 2 個矩形。
.burger:before
複製**
然後我們使用border-radius來很好地彎曲麵包。
.burger:before
複製**
佐料接下來，我們將新增主要的漢堡佐料：乳酪，肉和生菜。這次我們需要將 3 個形狀放在乙個
css選擇器中。
我們現在就把重點放在肉上。
.burger
複製**
嗯，那不是很好，有一些肉，但不在正確的位置。不幸的是，我們不能使用margin或padding來解決這個問題，因為它會移動整個漢堡，而不僅僅是牛排。
那嘗試些不同的東西：用box-shadow畫出肉。
.burger
複製**
這樣可行！然而，我們面臨另乙個問題：我們如何在同乙個css選擇器中新增乳酪和生菜？要解決這個問題，我們需要確認兩件事：
所以...我們只需新增更多的盒子陰影！
.burger
複製**
請注意，陰影的順序很重要，因為第乙個陰影的順序靠前，會出現在其他陰影的前面。
芝麻我們的漢堡正在形成，但它目前看起來很像熱狗。我們應該通過在頂部麵包中新增一些芝麻來解決這個問題。
首先，我們用box-shadow畫一粒芝麻。
.burger:after
複製**
然後我們通過使用許多框陰影複製它。
.burger:after
複製**
更好看的乳酪如果我們能讓乳酪看起來更像乳酪就更好了。例如，通過顯示乳酪切片的乙個角。這意味著即使已經使用了所有
css選擇器，我們還要畫乙個新的圖形（乙個黃色的三角形）。
如果我們仔細檢視我們的**，我們會注意到目前為止我們還沒有使用content屬性。讓我們看看當我們在其中新增字元 ▾ 時會發生什麼。
.burger:before
複製**
我們確實顯示了乙個新圖形，這次我們同樣不能使用marginorpadding來解決這個問題。
但是通過一些css技巧，我們將完成它。
.burger:before
複製**
現在我們完成了我們的芝士漢堡。
彩蛋當我給朋友傳送關於我這次挑戰的郵件時，她回答了這個聰明的答案。
.burger:before
複製**
css，從而獲得更好的效果。
結論我用單個
div和一些css設法實現的目標給我留下了深刻的印象。 當然使用svg會更有意義，但那裡的樂趣在**呢？ 用rhino做乙個地球
利用全球的地形圖，根據灰度生成高度不一的柱體 將球的uv展開 柱體鋪滿uv，使用曲面流動到球上 準備一張地形圖，這裡隨便找了乙個全球地形圖，有灰度區分高度的最好，顏色的區分的相對的高程不夠真實。開啟rhino，繪製乙個球，將球的uv展開。根據uv的大小繪製乙個面，用於在grasshopper中拾取作...
用html做乙個目錄 用555做乙個高壓發生器
用555做乙個高壓發生器。如圖，ne555為脈衝發生晶元 以此晶元外圍電路為準，頻率約1.7khz，占空比 10 q2為n溝道場效電晶體，q1為npn三極體，t1為高壓線圈。如圖所示 晶元為ne555，為脈衝發生晶元，脈衝頻率由c1 r1和r2來調整。開關管q2為n溝道場效電晶體。r3為場效電晶體的...
做乙個programmer，而不做乙個coder
programmer是程式的思考者，而coder只是乙個執行者 勞心者製人，勞力者制於人 如果專案不緊的情況下，應該從需求做起，最好能夠窮盡所有的需求，遇到與別人模組互動的情況，規定好與別人互動的介面。然後才是開始設計，抓住需求當中的名詞，想想是否設計成為類，然後根據測試用例，來設計框架結構，至少要...