這篇文章將為大家詳細講解有關怎樣使用CSS實現一只鴨子頭，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創新互聯建站是一家專注于成都網站設計、成都做網站與策劃設計,隨州網站建設哪家好?創新互聯建站做網站,專注于網站建設十余年,網設計領域的專業建站公司;建站業務涵蓋:隨州等地區。隨州做網站價格咨詢:028-86922220

代碼解讀

定義dom，容器中包含4個元素：

<figureclass="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);

}

.duckspan{

background-color:seagreen;

}

把容器旋轉45度：

.duck{

transform:rotate(-45deg);

}

設置每個正方形的圓角，組合成一只鴨子的抽象形狀：

.duckspan:nth-child(1){

border-top-left-radius:100%;

}

.duckspan:nth-child(2){

border-top-right-radius:100%;

}

.duckspan:nth-child(3){

border-bottom-right-radius:100%;

}

.duckspan:nth-child(4){

border-bottom-left-radius:100%;

}

為最后一個方塊設置有差異的顏色，使它看起來像鴨子嘴：

.duckspan:nth-child(4){

background-color:coral;

}

在第2個方塊用徑向漸變畫出一個圓點，代表鴨子的眼睛：

.duckspan:nth-child(2){

background-image:radial-gradient(black0.5em,transparent0.5em);

}

大功告成！

關于“怎樣使用CSS實現一只鴨子頭”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

當前名稱：怎樣使用CSS實現一只鴨子頭
鏈接URL：http://www.yijiale78.com/article16/jjpigg.html

成都網站建設公司_創新互聯，為您提供品牌網站建設、面包屑導航、建站公司、小程序開發、標簽優化、自適應網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯