當前位置：新聞中心交互體驗如何使用很少使用的功能創(chuàng)建非?？岬男Ч?/a>

觀點

交互體驗

2010-01-19 交互體驗

在今年的前端會議上，蘇黎世 Rachel Andrew談到了“ 釋放CSS網(wǎng)格布局的力量”。在演講結(jié)束時，她提到了一些舊的CSS屬性，這些屬性卡在了我的腦海：

僅通過使用良好支持的邊框半徑即可將圖像設(shè)置為圓形。不要忘記舊的CSS仍然存在并且很有用。您無需為每種效果都花哨的東西。

—雷切爾·安德魯（Rachel Andrew）

在我聽完這個演講后不久，我認為您當然可以創(chuàng)造出不僅僅是圓圈的東西，并且開始更深入地研究使用邊界半徑可以完成的工作。

掌握邊界半徑

單值

讓我們從基礎(chǔ)開始。希望這不會讓您感到厭煩。您可能熟悉CSS，并且也知道border-radius。它已經(jīng)存在了很多年，主要使用這樣的單個值：border-radius: 1em并且可能是2010年css3please.com是您最好的朋友時最受討論/喜愛的CSS3功能之一。

每當您只使用一個值時，所有角都會以此值四舍五入：

如您在上面的示例中所見，在固定長度值（例如）旁邊px，rem或者em您也可以使用百分比。通過將邊界半徑設(shè)置為50％，通常用于創(chuàng)建圓。百分比值基于給定元素的寬度和高度。因此，當在矩形上使用它時，將不再具有對稱的角。這是顯示border-radius: 110px和border-radius: 30%應(yīng)用于矩形的區(qū)別的示例。

請注意，右側(cè)的角不是對稱的，請記住這一點。我們稍后會再討論。

四種不同的價值觀

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

用斜杠分隔的八個值（這在這里很有趣）

我想你們大多數(shù)人已經(jīng)完成了我上面解釋的所有事情。現(xiàn)在我們進入令人興奮的部分。如果用斜杠分隔值并最多指定八個值，會發(fā)生什么情況？讓我們看看，規(guī)范對此有何評論：

如果在斜線之前和之后給出值，則斜線之前的值將設(shè)置水平半徑，而斜線之后的值將設(shè)置垂直半徑。如果沒有斜線，則值將相等地設(shè)置兩個半徑。

— W3C

因此，斜線前的值負責水平距離，而斜線后的值定義垂直長度。但是，這是什么意思？還記得矩形的百分比值嗎？對于垂直和水平距離以及不對稱的圓角，我們具有不同的絕對值，而這正是使用斜杠語法時得到的。

所以，當你比較border-radius: 4em 8em到border-radius: 4em / 8em的結(jié)果有很大的不同。

左側(cè)的對稱角構(gòu)成圓的四分之一，而右側(cè)的非對稱角則是省略號的一部分。

老實說，您得到的形狀看起來有些奇怪。但請記住您使用創(chuàng)建的圈子border-radius: 50%。之所以會出現(xiàn)一個圓，是因為定義一個邊的兩個值的總和為100％（50％+ 50％= 100％），并且沒有直線，這使您想起了原始的正方形。如果將相同的邏輯應(yīng)用于完整的8值border-radius語法，則可以創(chuàng)建看起來有點像撥子或有機單元格的形狀：

最終，四個重疊的橢圓構(gòu)成了最終的形狀。容易哈！

不要驚慌……我們?yōu)槟蛟炝艘粋€視覺生成器

我花了一些時間來習(xí)慣這種語法。不知何故不是那么直觀。為了使您的工作更輕松，我們構(gòu)建了一個小工具，可以幫助您創(chuàng)建自己的有機形狀。

不越過溪流

現(xiàn)在您已經(jīng)知道了這8個值，您可能會感到有點難過，因為我們的border-radius-tool不能為您提供分別設(shè)置每個值的選項…請坐，這是8-POINT-FULL- CONTROL版本。

如果您足夠大，您可能還記得1984年Ghostbusters電影中的這段話：

“不要越過溪流?！?“為什么？”-“那會很糟糕?！?/span>

杭州網(wǎng)站建設(shè)發(fā)生了類似的事情：如果您越過一側(cè)的手柄，形狀就會表現(xiàn)出來……讓我們難以預(yù)測。但是，請您自己看看，畢竟它不會以質(zhì)子的完全逆轉(zhuǎn)或其他任何事情結(jié)束，但不要說我沒有警告過您。

PS。非常感謝simurai。早在2010年，他就創(chuàng)建了一些CSS3 BonBon Button。即使它們看起來有些過時，但這也是我唯一遇到并了解過斜杠語法的地方。

上一篇：如果沒有面對面的互動，主要的溝通問題就很??容易發(fā)展返回觀點列表下一篇：投票：CSS應(yīng)該更像一種編程語言嗎？

本文標簽：

本文地址： http://www.bmwdream.cn/a/931.html

相關(guān)專題

開始您的數(shù)字化品牌體驗！ 0571-85815193 期待您的來電！

[ 網(wǎng)站建設(shè)×品牌官網(wǎng)設(shè)計×大策略營銷門戶×微信小程序開發(fā)×微信公眾號開發(fā)]

即刻聯(lián)系電話咨詢

網(wǎng)站事業(yè)部產(chǎn)品經(jīng)理

免費獲取項目策劃

項目開發(fā)部產(chǎn)品經(jīng)理

免費獲取項目策劃

觀點

案例

網(wǎng)站建設(shè)

應(yīng)用開發(fā)

如何使用很少使用的功能創(chuàng)建非?？岬男Ч?/h1>
2010-01-19 交互體驗

掌握邊界半徑