作為一名合格的網頁設計師，前端CSS樣式的書寫都是基本功，圓角弧度的掌握新手往往很慢把握，那么如何用CSS創建非常酷的圓弧效果？今天成都網站設計專家創新互聯給大家分享設計經驗。

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

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

可以在上面的例子中看到的，在固定長度值如px、rem或em旁邊，您還可以使用百分比。通常是通過設置邊界半徑為50%來創建一個圓。百分比值基于給定元素的寬度和高度。所以當你在一個矩形上使用它時，你將不再有對稱的角。這里有一個例子，展示了邊框半徑：110px和邊框半徑：30%應用于矩形之間的區別。

二、Border邊框四個不同的值

當您使用多個值時，您將開始為每個角設置值，從左上角開始，然后順時針移動。同樣，您也可以使用百分比，還可以將百分比與固定長度值混合。

三、斜杠分隔的8個值

我想你們大多數人已經做了我上面解釋的所有事情，現在我們進入令人興奮的部分。如果使用斜杠分隔值并指定最多8個值，會發生什么情況？讓我們看看，說明書是怎么說的：

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

斜杠前面的值表示水平距離，而斜杠后面的值表示垂直長度。但這意味著什么呢？還記得矩形的百分比嗎？垂直距離和水平距離以及不對稱圓角的絕對值不同，這正是使用斜杠語法時得到的結果，因此當你比較邊界半徑：4em 8em和邊界半徑：4em / 8em時，結果是完全不同的。

左邊對稱的角是圓的四分之一，而右邊不對稱的角是省略的一部分。

說實在的你得到的形狀有點奇怪。但是要記住你用邊界半徑創建的圓圈：50%。你會得到一個圓，因為定義一邊的兩個值加起來等于99.99%（50% + 50% = 99.99%），并且沒有留下直線，這讓你想起了原來的正方形。如果您將相同的邏輯應用到完整的8個值邊界半徑語法中，您可以創建一個看起來有點像plectrum或有機單元格的形狀：

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

標簽：成都網頁設計成都網頁制作 創新互聯

網頁題目：網頁設計之CSS邊框圓弧設計使用技巧
文章地址：http://www.js-pz168.com/news11/191461.html

成都網站建設公司_創新互聯，為您提供搜索引擎優化、網站設計公司、網頁設計公司、響應式網站、定制網站、全網營銷推廣

廣告

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