當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

css样式border-radius学习-画出水滴

發布時間：2024/1/8 编程问答 38 豆豆

生活随笔收集整理的這篇文章主要介紹了 css样式border-radius学习-画出水滴小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

😁?作者：Teddy (公眾號：雞倉故事匯)

??時間：2021-01-30?09:24:14

???天氣：多云轉晴

一、文件需求

1. 創建一個html頁面

完整代碼----有驚喜哦！

二、實現

創建html網頁寫出5個div 分別為：

<body><h1>玩轉border-radius，帶你畫圖</h1><div class="div1"></div><div class="div2"></div><div class="div3"></div><div class="div4"></div><div class="div5"></div> </body>

下面開始寫css樣式：

body {text-align: center;margin-top: 10%; } div {display: inline-block;width: 3.75rem;height: 3.75rem;margin-left: 2%;background-image: -webkit-linear-gradient(bottom, lightblue, lightcoral, rgb(48, 12, 231)); } .div1 {border-radius:48% 53% 51% 49% / 42% 56% 0% 56% ; } .div2 {border-radius:48% 53% 51% 2% / 56% 55% 0% 43% ; } .div3 {border-radius:100% 0% 51% 48% / 57% 0% 100% 43% ; } .div4 {border-radius:32% 0% 100% 100% / 1% 100% 100% 100% ; } .div5 {border-radius:41% 58% 0% 100% / 45% 100% 0% 61% ; }

大功告成！看效果。。。

ok！到這里就大功告成，小編（Teddy）在這里先感謝大家的到來。
雖然不是太詳細，小編已經很努力，給小編來個一鍵三連(點贊，關注，收藏)，小編會越來越努力。。。

總結

以上是生活随笔為你收集整理的css样式border-radius学习-画出水滴的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。