CSS繪制圓角矩形圖形的效果

我們?cè)诮o矩形的四角進(jìn)行圓角處理時(shí)，我們?cè)缙?，都是采用片圖來(lái)完成，這無(wú)疑是給網(wǎng)頁(yè)的加載增加了負(fù)擔(dān)，大量的圖片載入在網(wǎng)頁(yè)里，流量消耗，對(duì)手機(jī)用戶是一刺痛的。給網(wǎng)頁(yè)及APP的加載速度，無(wú)疑是我們一直研究的方向。下面我們來(lái)們看看，如何給矩形圓角下處理，使其達(dá)到我們的預(yù)期效果，又少用JPG等圖片元素。首先，會(huì)CSS的朋友，需要注意到CSS里的border-radius屬性，（英語(yǔ)方面的大咖小咖們，都注意到了radius翻譯是“半徑”，border是指邊沿、邊界、鑲邊。border-radius意思為“邊框半徑”）所以我們對(duì)它的定義，只需要給個(gè)值就可以了。詳細(xì)見(jiàn)下面的例子：

圓角矩形效果語(yǔ)法border-radius：12px;

聰明的你，是否已想到了舉一反三的？我們只給某一個(gè)角定義圓弧效果？是啦，下面我們來(lái)看看其它的一些圓弧效果：

單個(gè)角度圓弧果語(yǔ)法

border-top-left-radius:6px;

對(duì)角圓弧，弧度大小不同的效果語(yǔ)法

border-top-left-radius:6px;
border-top-right-radius:12px;

我們對(duì)四個(gè)角可以同時(shí)設(shè)置1到4個(gè)值。如果設(shè)置1個(gè)值，表示4個(gè)圓角都使用這個(gè)值。如果設(shè)置兩個(gè)值，表示左上角和右下角使用第一個(gè)值，右上角和左下角使用第二個(gè)值。如果設(shè)置三個(gè)值，表示左上角使用第一個(gè)值，右上角和左下角使用第二個(gè)值，右下角使用第三個(gè)值。如果設(shè)置四個(gè)值，則依次對(duì)應(yīng)左上角、右上角、右下角、左下角（順時(shí)針順序）。根據(jù)上述的效果，你是否會(huì)腦洞大開(kāi)，如果我們定義圓，是否可以用這個(gè)方法，答案是肯定的。我們?cè)趯?xiě)圓的代碼時(shí)，也是這樣定義的。只需要把

borde-radius:50%;

當(dāng)前題目：CSS繪制圓角矩形圖形的效果
文章分享：http://www.muchs.cn/news34/32134.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、品牌網(wǎng)站設(shè)計(jì)、面包屑導(dǎo)航、網(wǎng)站收錄、商城網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)