方法:1、利用“border-radius”屬性將正方形元素設(shè)置為扇形,語法為“border-radius:正方形寬度值 0 0;”;2、利用“元素{background-image:url(圖片路徑);}”語句給扇形元素設(shè)置背景圖片即可。
本教程操作環(huán)境:windows10系統(tǒng)、css3&&html5版、dell g3電腦。
css3怎樣實(shí)現(xiàn)圖片扇形呈現(xiàn)
在css中,可以利用border-radius屬性和background-image屬性實(shí)現(xiàn)圖片扇形顯示。
border-radius屬性可以將一個正方形的元素設(shè)置為扇形,然后利用background-image元素給這個扇形的元素設(shè)置背景圖片即可。
示例如下:
<!doctype html><html lang=\”en\”><head> <meta charset=\”utf-8\”> <meta name=\”viewport\” content=\”width=device-width, initial-scale=1.0\”> <meta http-equiv=\”x-ua-compatible\” content=\”ie=edge\”> <title>document</title> <style> div{ border-radius:200px 0 0; width: 200px; height: 200px; background-image:url(1118.02.png);} </style></head><body> <div></div></body></html>
輸出結(jié)果:
(學(xué)習(xí)視頻分享:css視頻教程)