研究繼續(xù)

研究byebye了？恩，一部分吧，不是全部。你有沒有注意到這種情況，當邊框?qū)挾却笥诘扔谕獍霃綍r候，內(nèi)半徑就是0，且按鈕就是個簡單的尖銳的方形？這好看嗎？可以改善嗎？如果有略微圓潤的邊角，豈不是會更好看？

進入下一階段的學(xué)習(xí)。在機械工程中，這個圓形部分被稱作為“圓角(fillet)”，通過機器操作生成這個圓角曲線稱之為“角隅填密法(filleting)”（我有機械工程的學(xué)士學(xué)位:)）。在我們這個例子中，角隅填密法會不會讓設(shè)計更好呢？如果是這樣的話，我們應(yīng)該如何計算應(yīng)該的圓角半徑呢？

邊角填充提高設(shè)計

為了確認filleting可以提高設(shè)計，我選擇了下面這些方形的情況，并切出了2, 4, 6以及8像素的圓角半徑。下面這個表顯示了結(jié)果。您可以發(fā)現(xiàn)，通過特定大小的圓角半徑填塞，設(shè)計確實好看些了。

我想看看，是否半徑在小尺寸有用，大尺寸也有用。所以，我就增加了一倍和四倍按鈕，結(jié)果羅列入表。最好看的圓角半徑貌似隨著按鈕大小而增加。

圓角半徑的公式是什么

我試圖去需找是否有確定最佳圓角半徑的公式。這有可能嗎？答案是Yes, 如果你給我2刀，我將來給你4刀，你給我6刀我還你12刀，給我25刀我給你50刀，那你可以輕易知道公式。從數(shù)學(xué)上講，你可以通過將數(shù)據(jù)(2-4, 6-12, 25-50)繪制成在圖表上的點，然后找到連接這些數(shù)據(jù)點的直線或曲線的公式，這個過程被稱為曲線擬合。

該選擇哪些數(shù)據(jù)對呢？其中一個是圓角半徑；圓角半徑在我看來是最好的（這不科學(xué)，我知道，但是那不屬于我們現(xiàn)在的范圍）。那另外一個呢？看上去像外半徑，但誰知道呢，甚至邊框?qū)挾榷寄馨缪菀粋€角色。所以我繪制了兩個圖表，一個是找出（最佳）內(nèi)半徑是如何隨著外半徑變化的，另外一個是找出內(nèi)半徑是如何隨著邊框半徑變化的。下面就是圖表。注意：如果你通過選擇最佳圓角半徑重復(fù)該實驗，結(jié)果可能不一樣，因為在某些情況下，并不清楚哪個圓角半徑是最佳的，因此，您就會選擇相鄰的圓角半徑。

內(nèi)半徑的增加似乎既跟外半徑又跟邊框?qū)挾韧?，但不是很流暢。?jù)我所知，只有當曲線遵循模式的時候，曲線擬合可以產(chǎn)生有意義的公式。該模式既可以是一條直線，拋物線，正弦波等。但是，我懷疑它是否有規(guī)律，繪制的曲線實在是太鋸齒狀了。

我基于自己生銹的數(shù)學(xué)知識做了整個實驗。我可能錯過了一些東西，或者我繪制的點不是足夠的多，如果誰更加見多識廣做了這個實驗，繪制了更多的點，我很樂意看到結(jié)果。到目前為止，畢竟我們必須依靠我們的眼睛找到最好的圓角半徑。我不入地獄誰入地獄。圓角半徑公式正在躲貓貓。

總結(jié)

下次你想創(chuàng)建內(nèi)嵌圓角矩形，遵循下面要求會有最佳結(jié)果：

1. 內(nèi)半徑=外半徑-邊框?qū)挾?/li>
   
2. 如果內(nèi)半徑為0，圓角之。通過目測找到最好的圓角半徑（基本上，外半徑小于100像素，最佳圓角半徑是1-15像素中任意位置）

//zxx: 以上為翻譯全文————–

譯者結(jié)語

上面內(nèi)容是不是有不知所云的感覺，確實，但這也是理所當然的。一些拓荒者，希望身體力行嘗試些新的東西，這些東西的成果往往都是純粹的實驗結(jié)果，或者總結(jié)的可能并不準確的理論。對于實用主義者而言，這些似乎是很枯燥的。

還有一類人屬于實踐者，他們總敏銳捕捉到一些新穎的理論或?qū)嶒灲Y(jié)果，然后嘗試性地應(yīng)用在實踐中?？赡苓@些實踐并不完美，也有可能成為了該方法的創(chuàng)造者。

還有一類人屬于求知者，時刻關(guān)注新技術(shù)的發(fā)展與脈動，于是他們成為了一些新方法飛推廣者。

還有一類人屬于跟風(fēng)者，這個技術(shù)大牛或某大網(wǎng)站使用了，于是，不假思索地，葫蘆畫瓢地也應(yīng)用上了，于是，成就了所謂的流行技術(shù)。

本文譯文內(nèi)容，可能原本是針對網(wǎng)頁設(shè)計師而言，如何在Photoshop中把握內(nèi)外圓角的大小，以實現(xiàn)最佳的內(nèi)外圓角矩形嵌套效果。但是理論這東西往往是相通的，于是，我們在實現(xiàn)網(wǎng)頁一些UI效果的時候，也可以應(yīng)用文章所述的結(jié)論，例如：

1. 內(nèi)半徑=外半徑-邊框?qū)挾?/strong>

如下測試代碼(內(nèi)borderRadius = 外borderRadius – padding值 → 10=30-20)：

.radius1{width:200px; padding:20px; background:#a0b3d6; border-radius:30px;}
.radius1_in{height:200px; background:#fff; border-radius:10px; }

<div class="radius1"><div class="radius1_in"></div></div>

.radius2{width:160px; border-radius:30px; border:40px solid #a0b3d6; background:#a0b3d6;}
.radius2_in{height:160px; background:#fff; border-radius:4px;}

<div class="radius2"><div class="radius2_in"></div></div>