天蠶在你身邊
不方便打電話(huà)?讓天蠶聯(lián)絡(luò)你
天蠶在你身邊
不方便打電話(huà)?讓天蠶聯(lián)絡(luò)你
天蠶重慶網(wǎng)絡(luò)公司概述:網(wǎng)頁(yè)制作中矩形框也就是長(zhǎng)方形或正方形的這種直角的四邊形,四角都是90度,我們?nèi)绾巫屗慕嵌紙A弧呢?許多網(wǎng)站建設(shè)的新手,可能直接通過(guò)圖片PS處理成圓弧的,事實(shí)上,我們可以直接通過(guò)樣式表來(lái)完成,下面我們看看,天蠶重慶網(wǎng)絡(luò)公司網(wǎng)站建設(shè)專(zhuān)家們的方法。
首先,我們?cè)谶@里復(fù)習(xí)一下CSS知識(shí),border-radius這個(gè)元素。因?yàn)槲覀冊(cè)诤竺鎸⒁玫摹?br />
border邊框?qū)傩裕?br />
radius 翻譯過(guò)來(lái)就是,橈骨; 半徑范圍; 半徑(距離); 用半徑度量的圓形面積
border-radius在這里就是圓弧的意思呢。(心急的朋友,或者已知上述知識(shí)的朋友,跳過(guò)這部分吧。)
其次,我們知道矩形是四邊形,四個(gè)角,也就是說(shuō),我們定義的時(shí)侯,就需要定義四角,即就需要四個(gè)參數(shù)分別設(shè)置(請(qǐng)注意順序:“上、左、下、右”的順序)。
如下圖的定義
.box{ border-radius: 5px 10px 20px 50px }
如果我們需要四個(gè)角都像左下角那樣,如下圖:
那么我們只需要義成 樣式: .box{ border-radius: 50;}
如果我們只想左右兩邊的出現(xiàn)圓弧,如下圖
樣式: .box{ border-radius: 50px 50px 0px 0px }
如果我們要形成對(duì)角圓弧效果,如下圖:
樣式.box{ border-radius: 50px 0px 20px 50px }
天蠶重慶網(wǎng)絡(luò)公司:對(duì)于很多不錯(cuò)的效果,我們都可以通過(guò)CSS表式表來(lái)呈現(xiàn),從而讓網(wǎng)頁(yè)加載更快,使網(wǎng)站推廣的優(yōu)化工作做得更到位。對(duì)于能通過(guò)樣式表能實(shí)現(xiàn)的圖片效果,我們就需要盡可能使用樣式表來(lái)完成。以減少服務(wù)器的負(fù)荷以及加快瀏覽網(wǎng)頁(yè)的速度都是有很大的幫助的。。
地址:重慶市渝中區(qū)上清寺鑫隆達(dá)B座28-8
郵編:400015
電話(huà):023-63612462
EMAIL:cnjl_net@163.com