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

css3畫扇形圖解

林雅南2年前8瀏覽0評論

CSS3可以用來畫出各種形狀,包括扇形。下面示例使用CSS3畫出一個(gè)90度的扇形。

.circle {
width: 0;
height: 0;
border-radius: 0 0 200px 200px;
border-style: solid;
border-width: 200px 200px 0 0;
border-color: #007bff transparent transparent transparent;
}

上面的示例中,我們使用border-radius來設(shè)置邊框的圓角半徑,左下角和右下角為200像素,并且使用transparent來指定邊框顏色透明。使用border-style來指定邊框形狀為實(shí)線,使用border-width來指定邊框?qū)挾龋⑶覂H設(shè)置了前三個(gè)邊框的寬度和顏色,隱式指定了第四個(gè)邊框的顏色為#007bff。

根據(jù)這個(gè)原理,我們可以畫出其他角度的扇形,只需要調(diào)整border-radius的值即可。比如下面示例畫出了一個(gè)45度的扇形。

.circle-45 {
width: 0;
height: 0;
border-radius: 0 0 200px 0;
border-style: solid;
border-width: 200px 200px 0 0;
border-color: #007bff transparent transparent transparent;
transform: rotate(45deg);
}

上面的示例中,我們使用transform來旋轉(zhuǎn)元素,以達(dá)到畫出角度為45度的扇形的效果。