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

2015-07-30 分類：網(wǎng)站建設

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

圓角矩形效果語法border-radius：12px;

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

單個角度圓弧果語法

border-top-left-radius:6px;

對角圓弧，弧度大小不同的效果語法

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

我們對四個角可以同時設置1到4個值。如果設置1個值，表示4個圓角都使用這個值。如果設置兩個值，表示左上角和右下角使用第一個值，右上角和左下角使用第二個值。如果設置三個值，表示左上角使用第一個值，右上角和左下角使用第二個值，右下角使用第三個值。如果設置四個值，則依次對應左上角、右上角、右下角、左下角（順時針順序）。根據(jù)上述的效果，你是否會腦洞大開，如果我們定義圓，是否可以用這個方法，答案是肯定的。我們在寫圓的代碼時，也是這樣定義的。只需要把

borde-radius:50%;

文章題目：CSS繪制圓角矩形圖形的效果
網(wǎng)站網(wǎng)址：http://chinadenli.net/news/32134.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、微信公眾號、用戶體驗、網(wǎng)頁設計公司、動態(tài)網(wǎng)站、網(wǎng)站維護

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

猜你還喜歡下面的內(nèi)容

AI成為中國互聯(lián)網(wǎng)企業(yè)的人工智能、機器學習方面的人才爭奪戰(zhàn)爭 2015-07-26
“無 UI”開始流行，設計師是不是要失業(yè)了？ 2015-07-22
高質(zhì)量的軟文需要滿足什么 2014-12-27
軟文網(wǎng)絡推廣的前期準備、投放和后期維護 2015-07-23
購買網(wǎng)站外鏈的基本原則 2014-12-26
設計品牌網(wǎng)站需要把握哪些要點 2015-07-20
記憶里的經(jīng)典廣告--27層凈化的樂百氏純凈水 2014-12-26

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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