CSS3漸變是一種可以讓網頁中的元素產生漸變顏色的技術。通過CSS3漸變可以讓寸頭發變得更加生動有趣,給用戶帶來更好的視覺體驗。
/* 設置漸變 */ .gradient { background: linear-gradient(to right, #e66465, #9198e5); } /* 應用到寸頭發 */ .buzz-cut { width: 150px; height: 100px; background: #333; border-radius: 50%; position: relative; } .buzz-cut:before { content: ""; position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; border-radius: 50%; background: white; z-index: 3; } .buzz-cut:after { content: ""; position: absolute; top: 20%; left: 20%; width: 60%; height: 60%; border-radius: 50%; background: #333; z-index: 2; } .buzz-cut .gradient { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; z-index: 1; }
如上代碼,我們首先定義了一個漸變樣式,設置了漸變的方向以及開始和結束的顏色。然后通過給寸頭發的父容器添加一個漸變的子元素,來達到讓寸頭發產生漸變色的目的,同時通過偽元素添加了頭發的白色皮膚和黑色細線(類似頭發的效果)。
上一篇mysql使用技巧
下一篇css 限制表格字符長度