#yin-yang {
 width: 96px;
 height: 48px;
 background: #eee;
 border-color: red;
 border-style: solid;
 border-width: 2px 2px 50px 2px;
 border-radius: 100%;
 position: relative;
}
 
#yin-yang:before {
 content: "";
 position: absolute;
 top: 50%;
 left: 0;
 background: #eee;
 border: 18px solid red;
 border-radius: 100%;
 width: 12px;
 height: 12px;
}
 
#yin-yang:after {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 background: red;
 border: 18px solid #eee;
 border-radius:100%;
 width: 12px;
 height: 12px;
}

#egg {
 display:block;
 width: 126px;
 height: 180px;
 background-color: red;
 -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
 border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

天不寫代碼，就看看人家是如何寫代碼的。

什么是css-doodle

<css-doodle />是一個Web組件。其基于Shadow DOM V1和Custom Elements V1來構建的。該組件可以幫助輕松的使用Custom Elements、Shadow DOM和CSS Grid創建任何你想要的圖案（CSS 圖案）。創建出來的圖案你可以運用于Web頁面中。

當你看到Custom Elements、Shadow DOM和CSS Grid的時候，一定很擔憂兼容問題。事實上你的擔憂是正常的，因為該組件到目前為止只在最新的Chrome和Safari瀏覽器上可以正常的運行。

簡單點說：

該組件通過其內部的規則（純CSS）會生成一系列的div構建的CSS Grid。你可以使用CSS輕松地操作這些div（單元格，每個div就是一個單元格）來生成圖案。生成的圖案既可以是靜態的，也可以是動態的。而其限制僅限于CSS本身的限制。

展示

這么復雜的圖形，你以為需要很長的代碼？

no,no,no！非常簡單，上圖右側就是它對應的代碼。不過，你需要先引入這個插件。

上手

<script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.3.0/css-doodle.min.js"></script>

or

npm install css-doodle

import 'css-doodle';

接下來你就可以在你的頁面寫<css-doodle>標簽了。css-doodle會根據你定義的代碼，生成dom元素，先展示你要的圖形。

下圖就是css-doodle生成的dom元素，和樣式。

酷炫效果

:doodle {    
  @grid: 126x1 / 650px;    
  @shape: drop;    
  background:  
    @m2(radial-gradient(#fff 50%, transparent calc(50% + 1px))
    @pn(200px 478px, 192px 469px) / @pn(80px 32px, 64px 32px)no-repeat),
    linear-gradient(10deg, #fff 26.5%, transparent calc(26.5% + 1px)),
    linear-gradient(205deg, #5256bd 56%, #954ccc);
}
offset-path: path('M @r650 600 Q @calc(@lr + @p(@r(-300, -20), @r(20, 300), @r(±300))) @r650 @lr5 0  ');  
position: absolute;  
will-change: offset-distance;  
animation: move @r(12s, 30s) infinite linear;  
animation-delay: -@r(25s);
@keyframes move {
  0% {
    offset-distance: 100% 
  }    
  20%, 80% { 
    opacity: 1 
  }
  100% { 
    offset-distance: 0 opacity: 0 
  }
}  
:after,:before {
  color: transparent;
  text-shadow: 0 0 0 #fff;
}  
:after {    
  content: @p([????...??]);
  font-size: @r(5px, 15px);
}
@nth(4-n) {    
  animation: none;
  offset-path: none;
  left: @pn(352px, 372px, 416px, 156px);
  top: @pn(416px, 437px, 460px, 434px);
  transform: 
    @pn(scaleY(4), scaleX(.75) scaleY(1.55), none, scaleY(1.5));
}  
@nth(3-n) {
  :after {
    content: '';
    font-size: 80px;
  }
}  
@nth(1) {    
  filter: blur(28px);  
}  
@nth(4) {    
  :after {
    content: '';
    font-size: 48px;
  }
}

結語

看到這里，是不是覺得CSS非常6。隨著前端技術不斷的革新，CSS能做的事已經非常的多了，只有不斷的學習，才能跟進技術時代的步伐。

關注我，學習更多編程知識哦，不僅僅是前端！

小伙伴們，有問題可以評論區留言哦，歡迎大家點評。

謝謝大家一直以來的支持。學習更多CSS知識，點擊下方專欄吧！

SS全稱“Cascading Style Sheet”，它的意思是“層疊樣式表”或“級聯樣式表”，CSS盒子模型是在網頁設計中用到的CSS技術中引用的一種思維模型。CSS盒子模型由內容區、填充、邊框、空白邊組成。

CSS盒子模型常見用途

由于CSS盒子模型是CSS中的一個重要概念，每一個元素都可以當作一個矩形的盒子，這個矩形盒子可以描述元素所占空間內容。CSS盒子模型更方便了設計者對網頁設計的整體把控。

CSS盒子模型繪制方法

用億圖圖示繪制CSS盒子模型十分簡單，只需要找到指定模板即可，新手參考以下幾個步驟即可完成CSS盒子模型的繪制。

第一步：下載“億圖圖示”軟件，啟動軟件界面，登錄賬號開始操作。

第二步：點擊搜索框輸入“CSS盒子模型”，尋找符合設計要求的CSS盒子模型模板，點擊“使用”打開CSS盒子模型模板。

第三步：點擊操作區的CSS盒子模型，根據自己的需要，在模板上修改各層次的注釋，在上方操作區更改字體為黑體，并更改字體大小。

第四步：雙擊CSS盒子模型中的“文本”方框，即可輸入CSS盒子模型中的文本，右側填充可以修改填充色、邊框顏色。

第五步：完成CSS盒子模型制作之后，點擊左上角的“保存”等按鈕，本次選擇保存為讓圖片格式，修改好分辨率等參數之后，CSS盒子模型就可以存儲在電腦中。

以上就是CSS盒子模型繪制方法的相關介紹。

CSS盒子模型繪制軟件——億圖圖示

當有繪制CSS盒子模型的需求時，選擇億圖圖示這款國產矢量繪圖軟件，讓用戶繪圖事半功倍。
億圖圖示是一款與眾不同的矢量繪圖軟件，它采用了與其他繪圖軟件完全不同的思維模式設計開發，在滿足了用戶基本的繪圖需求基礎上，開發了模板套用功能，讓繪圖的效率提高許多，同時，在云存儲的加持下，億圖圖示用戶可以隨時隨地繪制作品。
使用億圖圖示繪制CSS盒子模型，直接套用一個模板，在原有基礎上修改、添加需要的元素，提升繪圖效率。

為什么選擇億圖圖示繪制CSS盒子模型？

1、可靠軟件，值得信賴：億圖圖示經過了九個大版本的升級，軟件可靠程度大幅增加，現在已經擁有超過900萬用戶，龐大的使用群體是億圖圖示經受住市場優勝劣汰的體現。
2、軟件資源庫強大，滿足繪圖需求：億圖圖示擁有數量龐大的矢量符號庫和模板庫，當用戶繪圖時可以很輕松的找到自己需要的符號，即使符號很特殊在庫中找不到，用戶也可以自行繪制或者導入本地符號圖形、從庫外調用。
3、先用后付，性價比高：億圖圖示為新用戶謀福利，凡是新注冊的億圖圖示賬戶，均可長期使用免費基礎版本。當有高級需求的時候，可以再升級購買會員版。