色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css 弧角

錢斌斌2年前12瀏覽0評論

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 屬性,我們可以讓我們的網頁更加美觀和動態。