你是否曾經在網頁設計中，遇到過需要用到圓環的情況。如果你是一個敏感的設計師，不難看出，圓環在 visui 上的呈現，有著非常現代，又耐人尋味的設計感。但是，這個圓環除了好看之外，還有其他寓意嗎？答案是肯定的。

其實，CSS3 圓環可以被設計成各種風格，比如漸變色，動態效果等。而最受歡迎并且寓意最美好的，就是我們今天要說的 "沉魚落雁"。

.fish-bird-ring {
width: 200px;
height: 200px;
border-radius: 50%;
position: relative;
overflow: hidden;
}
.fish-bird-ring:before,
.fish-bird-ring:after {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
border-radius: 100%;
transform: translateX(-50%);
}
.fish-bird-ring:before {
background: #ec6141;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
transition-property: all;
}
.fish-bird-ring:after {
background: #3f9fe3;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
transition-property: all;
}
.fish-bird-ring:hover:before {
transform: translateX(-200%);
}
.fish-bird-ring:hover:after {
transform: translateX(0);
}

代碼中，我們定義了一個類名為 "fish-bird-ring" 的 div 容器，它的基本樣式有寬高均為 200px，邊框半徑為 50%（即它是一個圓形）。容器內部還有兩個偽元素，分別是圓環的兩側。我們這里用的是偽元素的 :before 和 :after，這兩個偽元素的寬度都是 50%，高度是 100%，同時圓角也是 100%（即畫出了一個圓與圓的組合效果）。

而這個圓環的名字，就是來源于其中包含的兩個大小相等、顏色不同的圓：一個是紅色，一個是藍色。這里的紅色，寓意著 "沉魚"，代表柔順、美滿、優雅；而藍色，則代表 "落雁"，表現出英姿颯爽、自由自在、與眾不同的特點。

這樣設計的圓環，在圖形和顏色的結合下，成為了現代舞臺上極具美感的圖形，而且在富有韻味的基礎上，更設計出人們熱愛、情感豐富的涵義。