小編給大家分享一下使用CSS實現一只鴨子頭的方法,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
讓客戶滿意是我們工作的目標,不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴,公司提供的服務項目有:域名與空間、虛擬空間、營銷軟件、網站建設、鳳翔網站維護、網站推廣。https://github.com/comehope/front-end-daily-challenges
定義 dom,容器中包含 4 個元素:
<figure class="duck"> <span></span> <span></span> <span></span> <span></span> </figure>
居中顯示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: papayawhip; }
定義容器尺寸:
.duck { width: 10em; height: 10em; }
用 grid 把 4 個方塊按 2*2 布局:
.duck { display: grid; grid-template-columns: repeat(2, 1fr); } .duck span { background-color: seagreen; }
把容器旋轉 45 度:
.duck { transform: rotate(-45deg); }
設置每個正方形的圓角,組合成一只鴨子的抽象形狀:
.duck span:nth-child(1) { border-top-left-radius: 100%; } .duck span:nth-child(2) { border-top-right-radius: 100%; } .duck span:nth-child(3) { border-bottom-right-radius: 100%; } .duck span:nth-child(4) { border-bottom-left-radius: 100%; }
為最后一個方塊設置有差異的顏色,使它看起來像鴨子嘴:
.duck span:nth-child(4) { background-color: coral; }
在第 2 個方塊用徑向漸變畫出一個圓點,代表鴨子的眼睛:
.duck span:nth-child(2) { background-image: radial-gradient(black 0.5em, transparent 0.5em); }
以上是使用CSS實現一只鴨子頭的方法的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注創(chuàng)新互聯(lián)成都網站設計公司行業(yè)資訊頻道!
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內外云服務器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應用場景需求。
新聞標題:使用CSS實現一只鴨子頭的方法-創(chuàng)新互聯(lián)
文章源于:http://www.muchs.cn/article46/ddeoeg.html
成都網站建設公司_創(chuàng)新互聯(lián),為您提供做網站、網站建設、域名注冊、軟件開發(fā)、關鍵詞優(yōu)化、外貿建站
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)