java 实心圆,如何用css3实现实心圆
生活随笔
收集整理的這篇文章主要介紹了
java 实心圆,如何用css3实现实心圆
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
小伙伴們在日常瀏覽網(wǎng)站和網(wǎng)頁的時候,時不時會看到有些網(wǎng)頁會有圓效果的出現(xiàn),例如:有的網(wǎng)站圖片在一個圓的里面等等。那么,有的小伙伴們會想這個圓是怎樣用代碼實現(xiàn)的呢,用html還是css呢。在這里小編告知大家既不是用html,也不是用css,而是用css3。今天,小編會為小伙伴們分享如何用css制作實心圓。實現(xiàn)這些效果所用的css3的代碼就是向元素添加圓角邊框的border-radius屬性。首先,分享這個屬性是使用方法:
1:語法為:border-radius:左上角 右上角 右下角 左下角;
2:border-radius的值可以使用%,px, em。(但%和em目前的兼容性還不好。)
知道了這個屬性的使用的方法后,接下來小編會依次為小伙伴們講解制作實心圓,實心上半圓,以及實心右半圓的方法。
首先,制作實心圓的方法:1:把高和寬是值都設(shè)置一樣(也就是正方形)。2:圓角的值都設(shè)置高和寬值的一半。
代碼如下:
html代碼
css代碼
效果圖:
實心圓
今天就分享到這里吧,下期見。
總結(jié)
以上是生活随笔為你收集整理的java 实心圆,如何用css3实现实心圆的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 奥卡姆剃刀定律
- 下一篇: Minecraft 1.12.2模组开发