毛片免费播放无码福利站_亚洲1级 欧美高清_中国免费看的A级片电影_一级a做片性视频口咬

天蠶在你身邊

不方便打電話?讓天蠶聯(lián)絡(luò)你

我們存在,我們思索,我們不斷進(jìn)取首頁 >> 資訊 >> 網(wǎng)站建設(shè)知識
圓角矩形css完美詮釋

天蠶網(wǎng)站建設(shè)編緝語:我們在給矩形的四角進(jìn)行圓角處理時,我們早期,都是采用片圖來完成,這無疑是給網(wǎng)頁的加載增加了負(fù)擔(dān),大量的圖片載入在網(wǎng)頁里,流量消耗,對手機(jī)用戶是一刺痛的。給網(wǎng)頁及APP的加載速度,無疑是我們一直研究的方向。下面我們來們看看,如何給矩形圓角下處理,使其達(dá)到我們的預(yù)期效果,又少用JPG等圖片元素。

首先,會CSS的朋友,需要注意到CSS里的border-radius屬性,(英語方面的大咖小咖們,都注意到了radius翻譯是“半徑”,border是指邊沿、邊界、鑲邊。border-radius意思為“邊框半徑”)所以我們對它的定義,只需要給個值就可以了。詳細(xì)見下面的例子:

矩形圓角css代碼( 矩形)

 

css圓角矩形效果

圓角矩形效果

語法border-radius:12px;

 

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

css一個圓角弧效果

單個角度圓弧果

語法 border-top-left-radius:6px; 

css對角圓弧效果 弧度一大一小效果

對角圓弧,弧度大小不同的效果

語法 border-top-left-radius:6px;  

border-top-right-radius:12px;

天蠶軟件開發(fā)公司編者語:我們對四個角可以同時設(shè)置1到4個值。如果設(shè)置1個值,表示4個圓角都使用這個值。如果設(shè)置兩個值,表示左上角和右下角使用第一個值,右上角和左下角使用第二個值。如果設(shè)置三個值,表示左上角使用第一個值,右上角和左下角使用第二個值,右下角使用第三個值。如果設(shè)置四個值,則依次對應(yīng)左上角、右上角、右下角、左下角(順時針順序)。

根據(jù)上述的效果,你是否會腦洞大開,如果我們定義圓,是否可以用這個方法,答案是肯定的。我們在寫圓的代碼時,也是這樣定義的。

只需要把 borde-radius:50%;  

css將矩形轉(zhuǎn)換成一個圓的定義,css圓形樣式

天蠶網(wǎng)站建設(shè)公司總結(jié):CSS越來越強(qiáng)大,它對圖形及色彩的控制越來越強(qiáng)大,我們除了可以通過CSS代碼繪制圖形,同時也可以為它著色,不是單純的填充單色哦,而漸變等多種效果的色彩,我們將在下一次的章節(jié)里介紹CSS繪制三角形及其它圖形效果。


地址:重慶市渝中區(qū)上清寺鑫隆達(dá)B座28-8

郵編:400015

電話:023-63612462

EMAIL:cnjl_net@163.com

渝ICP備09007657號-6

渝公網(wǎng)安備 50010302000872號