HTML5是Web開發的最新標準,可以增強Web應用程序的互動性、多媒體、離線存儲,同時也提供了更多簡化代碼、快速開發的功能,其中設置div圓屬于CSS3的內容。
div{ width:100px; height:100px; border-radius:50%; /*給div設置圓角*/ background-color:#ccc; }
上述代碼中,我們使用CSS3的border-radius屬性,將div的四個角設置為半徑為50%的圓形,實現了div圓形效果。同時,我們可以通過設置不同的半徑大小,實現不同形狀的圓角、橢圓等效果。
需要注意的是,border-radius屬性在IE8及以下版本中不被支持,因此我們需要在CSS中添加備選方案,保證瀏覽器兼容性。
div{ width:100px; height:100px; background-color:#ccc; /*Safari和Chrome*/ -webkit-border-radius:50%; /*Firefox*/ -moz-border-radius:50%; /*IE9+*/ -ms-border-radius:50%; /*CSS3*/ border-radius:50%; }
總之,使用CSS3的border-radius屬性可以方便快捷地實現div圓形效果,并且可以通過設置不同的圓角半徑大小,實現多樣化的形態。同時,為了保證瀏覽器兼容性,需要在CSS中添加備選方案。
上一篇jsp中創建css
下一篇mysql5.6連接時間