CSS3是一種用來為網頁添加樣式和視覺效果的語言。它包含了很多強大的功能,其中之一就是制作圓形。
/* 實現圓形 */ .circle { width: 100px; height: 100px; border-radius: 50%; }
以上代碼使用了border-radius屬性,它可以用來設置元素的圓角。當我們將其設置為50%時,就可以得到一個圓形的元素。
當然,我們也可以對不同的角分別設置圓角,例如:
/* 實現不同角度的圓角 */ .round { width: 100px; height: 100px; border-top-left-radius: 50%; border-top-right-radius: 20%; border-bottom-left-radius: 10%; border-bottom-right-radius: 30%; }
以上代碼就是一個擁有不同圓角的元素,可以讓網頁更加豐富和有趣。
使用CSS3制作圓形非常簡單,只需設置一個固定的寬度和高度,然后使用border-radius屬性就可以了。