CSS 中的弧角,指的是一個元素的邊角是圓形或者橢圓形的效果。通常我們使用border-radius
屬性來實現這種效果。
/* 把一個元素的所有四個角都改成圓角 */ border-radius: 50%; /* 把一個元素的左側兩個角改成圓角 */ border-top-left-radius: 10px; border-bottom-left-radius: 10px; /* 把一個元素的右側兩個角改成橢圓角 */ border-top-right-radius: 20px 30px; border-bottom-right-radius: 20px 30px;
border-radius 屬性有一個簡寫方式,可以一次性指定四個角的效果:
/* 從左上角開始,順時針依次指定四個角的半徑 */ border-radius: 10px 20px 30px 40px;
如果某一個角的半徑是 0,這個角就不會有弧角效果。例如:
/* 只有右下角有弧角效果 */ border-radius: 0 0 20px 0;
在 CSS3 中,弧角效果的實現方式更加靈活,我們可以指定一個不同的半徑來控制橫向和縱向的弧度。
/* 豎直方向的弧度是 10px,橫向方向的弧度是 20px */ border-radius: 10px / 20px;
我們還可以把多個元素的弧角效果進行組合,并且讓它們同時具有相同的半徑值:
/* 把兩個 div 元素的右側兩個角改成圓角并且具有相同的半徑值 */ div:first-child { border-top-right-radius: 20px; border-bottom-right-radius: 20px; } div:last-child { border-top-right-radius: 20px; border-bottom-right-radius: 20px; }
總之,通過使用 border-radius 屬性,我們可以讓我們的網頁更加美觀和動態。
上一篇css 彈出框不顯示
下一篇mysql用語句改表名