中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

網(wǎng)頁(yè)設(shè)計(jì)之CSS邊框圓弧設(shè)計(jì)使用技巧

2022-08-19    分類: 網(wǎng)站建設(shè)

作為一名合格的網(wǎng)頁(yè)設(shè)計(jì)師,前端CSS樣式的書寫都是基本功,圓角弧度的掌握新手往往很慢把握,那么如何用CSS創(chuàng)建非??岬膱A弧效果?今天成都網(wǎng)站設(shè)計(jì)專家創(chuàng)新互聯(lián)給大家分享設(shè)計(jì)經(jīng)驗(yàn)。

一、CSS樣式border邊框特性、單值

讓我們從基礎(chǔ)開始,希望這不會(huì)讓你厭煩,您可能熟悉CSS,也知道邊界半徑。它已經(jīng)存在多年了,主要用于像這樣的單值:border-radius:1em,它可能是2010年CSS3最受討論/喜愛的特性之一,當(dāng)你只使用一個(gè)值時(shí),所有的角都會(huì)被這個(gè)值所包圍:

1

可以在上面的例子中看到的,在固定長(zhǎng)度值如px、rem或em旁邊,您還可以使用百分比。通常是通過設(shè)置邊界半徑為50%來創(chuàng)建一個(gè)圓。百分比值基于給定元素的寬度和高度。所以當(dāng)你在一個(gè)矩形上使用它時(shí),你將不再有對(duì)稱的角。這里有一個(gè)例子,展示了邊框半徑:110px和邊框半徑:30%應(yīng)用于矩形之間的區(qū)別。

2

二、Border邊框四個(gè)不同的值

當(dāng)您使用多個(gè)值時(shí),您將開始為每個(gè)角設(shè)置值,從左上角開始,然后順時(shí)針移動(dòng)。同樣,您也可以使用百分比,還可以將百分比與固定長(zhǎng)度值混合。

3

三、斜杠分隔的8個(gè)值

我想你們大多數(shù)人已經(jīng)做了我上面解釋的所有事情,現(xiàn)在我們進(jìn)入令人興奮的部分。如果使用斜杠分隔值并指定最多8個(gè)值,會(huì)發(fā)生什么情況?讓我們看看,說明書是怎么說的:

如果在斜杠之前和之后給出值,那么斜杠之前的值設(shè)置水平半徑,斜杠之后的值設(shè)置垂直半徑。如果沒有斜杠,則值設(shè)置為相等的半徑。

斜杠前面的值表示水平距離,而斜杠后面的值表示垂直長(zhǎng)度。但這意味著什么呢?還記得矩形的百分比嗎?垂直距離和水平距離以及不對(duì)稱圓角的絕對(duì)值不同,這正是使用斜杠語(yǔ)法時(shí)得到的結(jié)果,因此當(dāng)你比較邊界半徑:4em 8em和邊界半徑:4em / 8em時(shí),結(jié)果是完全不同的。

4

左邊對(duì)稱的角是圓的四分之一,而右邊不對(duì)稱的角是省略的一部分。

說實(shí)在的你得到的形狀有點(diǎn)奇怪。但是要記住你用邊界半徑創(chuàng)建的圓圈:50%。你會(huì)得到一個(gè)圓,因?yàn)槎x一邊的兩個(gè)值加起來等于99.99%(50% + 50% = 99.99%),并且沒有留下直線,這讓你想起了原來的正方形。如果您將相同的邏輯應(yīng)用到完整的8個(gè)值邊界半徑語(yǔ)法中,您可以創(chuàng)建一個(gè)看起來有點(diǎn)像plectrum或有機(jī)單元格的形狀:

5


總結(jié):圖像是通過使用支持良好的邊界半徑設(shè)置成圓的,不要忘記舊的CSS仍然存在并且非常有用,你不需要為每個(gè)效果都使用一些花哨的東西。

標(biāo)簽:成都網(wǎng)頁(yè)設(shè)計(jì)成都網(wǎng)頁(yè)制作 創(chuàng)新互聯(lián)

網(wǎng)頁(yè)題目:網(wǎng)頁(yè)設(shè)計(jì)之CSS邊框圓弧設(shè)計(jì)使用技巧
文章地址:http://m.rwnh.cn/news11/191461.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供搜索引擎優(yōu)化網(wǎng)站設(shè)計(jì)公司、網(wǎng)頁(yè)設(shè)計(jì)公司、響應(yīng)式網(wǎng)站、定制網(wǎng)站、全網(wǎng)營(yíng)銷推廣

廣告

聲明:本網(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í)需注明來源: 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁(yè)設(shè)計(jì)
即墨市| 宁武县| 康平县| 佛山市| 龙岩市| 镇康县| 斗六市| 江源县| 建昌县| 安宁市| 漳平市| 德兴市| 紫金县| 石棉县| 柞水县| 多伦县| 丰台区| 汝南县| 丰县| 天门市| 太仓市| 马鞍山市| 乌鲁木齐市| 郓城县| 仁布县| 镶黄旗| 定西市| 皋兰县| 张家口市| 侯马市| 卫辉市| 南汇区| 美姑县| 应用必备| 楚雄市| 江都市| 全椒县| 灵山县| 广东省| 富裕县| 攀枝花市|