核類型 寫法

Trident(IE) -ms-columns IE瀏覽器使用的內核

Webkit(Chrome/Safari) -webkit-columns 蘋果公司自己的內核，也就是蘋果的Safari瀏覽器使用的內核;

google的chrome也使用webkit作為內核; 360安全瀏覽器也是WebKit內核(Chrome)

Gecko(Firefox) -moz-columns 目前最主流的Gecko內核瀏覽器是Mozilla Firefox

Presto(Opera) -o-columns 目前Opera采用的內核

在Dreamweaver軟件代碼提示中內置了以上四種私有屬性前綴

Konqueror(linux) -khtml-columns KDE開發的內核,常見的KHTML內核的瀏覽器：Konqueror

W3C columns

是先寫私有的CSS3屬性, 再寫標準的CSS3屬性。

-webkit-transform:rotate(-3deg); /*為Chrome/Safari*/
-moz-transform:rotate(-3deg); /*為Firefox*/
-ms-transform:rotate(-3deg); /*為IE*/
-o-transform:rotate(-3deg); /*為Opera*/
transform:rotate(-3deg); /*為nothing*/

去掉CSS3前綴 rotate:旋轉

360安全瀏覽器是基于WebKit內核(Chrome)的瀏覽器

360的極速瀏覽器基于IE內核和webkit內核(Chrome)的雙核瀏覽器

瀏覽器內核查詢網站:http://ie.icoa.cn/

私有屬性可用于:

border-radius(圓角矩形)

div{
width:200px;height:120px;
border:2px solid #000000;
background-color:#FFFF00;
border-radius:20px; /* CSS3中的圓角矩形 */
-moz-border-radius:20px; /* mozilla中的圓角矩形 */
-webkit-border-radius:20px; /* Safari 3中的圓角矩形 */
}

opacity(透明度)

.opacity{
filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* 老版Mozilla */
-khtml-opacity:0.5; /* 老版Safari */
opacity:0.5; /* 支持opacity的瀏覽器*/
}

簡單解釋，IE使用私有屬性filter:alpha(opacity=50)(也可寫成冒號filter:alpha(opacity:50))，Moz Family使用私有屬性-moz-opacity:0.5，

而標準的屬性是opacity, 后面的數值是透明度，使用小數表示的數值

以上直接可以簡化:

.opacity{
filter:alpha(opacity:30); opacity:0.3; /*兼容所有的瀏覽器 */
}

以上實例可見:javascript|運動基礎及實例|淡入淡出

漸進增強(先保證低版本瀏覽器)

.transition{
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}

優雅降級(先保證高版本瀏覽器)

.transition{
　　 transition: all .5s;
　　 -o-transition: all .5s;
　-moz-transition: all .5s;
-webkit-transition: all .5s;
}

如何決定:

根據你的用戶所使用的客戶端的版本來做決定?

在在各類產品中，圓角的設計越來越多，而本文是關于卡片圓角的思考和應用，一起來看看~

引言

我們最熟悉的蘋果公司在使用圓角卡片最早卡已追溯到1981年，當時 Apple 的天才程序員 Bill Atkinson 正向團隊展示他是如何用一種聰明的方法——可以在僅有 68000 處理器的 Lisa 和 Macintosh 機器上快速畫出圓和橢圓。

Steve Jobs 看了之后有另外的想法，他說：“圓和橢圓都不錯，但是能畫出帶圓角的四邊形嗎？我們現在也能畫出嗎？”

Bill Atkinson 回答說很難做到，而且他認為并不真需要圓角四邊形，Steve Jobs 就立刻強烈回應了：“到處都是圓角四邊形！看看這個房間周圍就知道了！”并且還帶著 Bill Atkinson 出去轉看可以碰到多少圓角四邊形，最后 Bill Atkinson 被說服，第二天下午就拿出了滿意的結果。

目錄：

1. 手機工業設計圓角的應用
2. 手機系統UI的圓角應用
3. 人眼識別圓角更加容易
4. 圓角的安全性、親密性
5. 圓角使得信息更易于處理
6. 總結

1. 手機工業設計圓角的應用

首先我們縱觀2018年當下各大廠商發布的手機，在工業設計上來看基本都采用了更加柔和的圓角設計。例如iPhone、SAMSUNG、小米、VIVO等等。

在屏幕設計上同樣選擇了圓角設計，在細節之處也保持了高度的統一，例如：在攝像頭位置的連接處同樣采用了圓角弧度作為過渡。

我們以iPhone為例：

可見圓角設計的應用已經成為硬件工業設計的中的非常重要的設計語言。

2. 手機系統UI的圓角應用

不止是手機的工業硬件設計上采用了大量的圓角，各大廠商的手機系統 UI 也大量采用了圓角設計。大家最熟悉的可能就是 iOS 系統里的圓角設計，自2007年隨著 iOS 7 的發布，Apple 將 iOS 上的標志性的圓角標輪廓做了更新，將工業設計中的曲線連續概念應用到了視覺設計上，一直延續至今，在 iOS 12 全面應用。

除了 iOS ，Android 的各大廠商也紛紛使用圓角設計，例如 SAMSUNG 的 ONE UI，都是采用了圓角的設計語言。

以及國內的 MIUI 10 的系統界面設計同樣使用了圓角作為設計語言。

3. 人眼處理圓角更加容易

相對于其他圖形，人類的眼睛更容易識別圓角矩形而不是直角矩形，因為人在眼睛的生理構造上中央凹(fovea centralis，是視網膜中視覺最敏銳的區域)在處理圓形時最快，而處理矩形邊緣則需要涉及大腦中更多的“神經影像工具”[1]。所以，人眼處理圓角更容易，因為它們看起來比普通矩形更接近于圓。

例如 App Store today頁面，通過圓角的卡片設計用戶可以快速識別內容，但如果換成直角的話則會提升它的識別成本。

在巴羅(Barrow)神經學研究所完成的關于“角(corners)”的科學研究發現，“角的突顯性感知與角的度數的線性變化，銳角比鈍角產生更強的虛幻的突顯性”[2]。換句話說，角越銳利，看起來就越顯而易見。而角出現的越凸顯，就越多對視覺過程產生影響。

例如西瓜視頻改版中，將“銳角”的播放按鈕改成了“圓角”的播放按鈕，較少了銳角對用戶的視覺影響。

4. 圓角更加安全

相對于銳角，圓角顯得更加柔和，具有安全感。尖銳的圖形或者物品更容易應用在警惕性的場景里，會給人予以警示或者傷害。例如危險的標示：

圓角自身的圖形屬性則更加柔和、舒適，給人一種安全感和親密。例如在設計玩具的時候會采用大量的圓角設計，來讓家長對其放下戒備心，讓家長覺得這是安全的，可以給孩子玩。

試想哪個家長會給孩子一把刀子玩？

現在的少兒用戶群體增長也帶來了不可避免的趨勢，針對少兒用戶，由于群體的特殊性，少兒應用 app 中使用了大量的圓角設計，例如 ABC mouse 中控件都使用了大圓角的設計，使界面顯得富有童趣，且安全可靠。

5. 圓角使得信息更易于處理

1. 圓角的引導性

圓角在使用地圖或圖表的場景中具有的得天獨厚的優勢，圓角的弧度能夠更加平滑的連續的引導用戶的視線，符合用戶的頭部與眼睛的自然運動，而銳角則會迫使用戶的視線進行強制轉折，其中容易造成用戶的停頓。

例如北京的地鐵地圖，在折線處都采用了圓角設計，具有很強的引導性，來幫助用戶快速查詢各個地鐵站點。

在一些具有引導性、指向性的圖標中大量使用圓角曲線，例如：高德地圖的導航界面，轉彎 icon 的轉折點使用了圓角作為過渡，引導用戶視線。

2. 圓角的內指向性

在卡片上的應用中，由于邊緣圓角向內指向矩形的中心更加明顯，所以更加凸顯卡片內的內容。

如圖例：

當多個卡片并排時，帶圓角的卡片具有更強的內部指向性，且相鄰的兩條線差異化較大，我們可以清楚分辨他們的邊界線，所以更加容易被分辨；而同樣大小的直角矩形的內部指向性較弱以及臨近的兩根“線”更加相似，分辨起來會相對困難一些。

例如 nice 的好貨頁面，通過簡單的修改我們再次比較一下直角與圓角在實際中的應用，我們可以看到，在識別直角卡片的時候我們需要耗費更多的精力，而圓角卡片則不要耗費過多的精力，且由于圓角的內指向性，圓角卡片能夠更好的承托卡片內的內容。

6. 通欄卡片&圓角卡片

從以上分析中我們得知了圓角卡片的優勢，那么現在我們將通欄卡片和圓角卡片做一下比對，看一看它們各自都有什么優勢。

1. 空間利用率比對

通欄式卡片比圓角卡片的空間利用率高，同等情況下通欄式卡片的可承載更多內容。

圓角卡片需要在規范好的內容區之內，卡片的內容與卡片邊緣還需要一定的間隔距離，導致了內容區域的縮小，而通欄卡片則沒有這樣的煩惱。

2. 視覺識別性比對

圓角卡片比通欄式卡片的視覺識別性更好，原因如上我們提到的人眼識別原型更加容易，而識別直角則不易被識別。所以說我們需要突出或者區別內容的時候首選圓角卡片。例如故宮展覽、微博、知乎、餓了么：

3. 沉浸感比對

通欄式卡片比圓角卡片的沉浸感更強，因為圓角更容易被識別，而直角則不容易的被察覺。我們觀察我們常用的 app 中的“feed流”幾乎都是通欄式卡片。例如：same、豆瓣、LOFTER、等。

而圓角則希望你能夠快速識別卡片上的內容，并能夠與周圍的元素有所區分，強調卡片內的內容，所以圓角卡片常常打斷用戶的沉浸感，目的性更強一些。例如豆瓣的書影音、途家的首頁、keep 的課程頁面、京東金融的個人頁面。

由于圓角看片的自身屬性，我們可以看出圓角卡片并適合沉浸感較強的頁面當中，上圖中都是為了盡可能的突出內容的主題或功能。

7. 總結

我們再來回顧一下本期的分享，拋開設計潮流的因素之外，我們要核心記住以下3點：

1. 人眼的中央凹在處理圓角的時候更加快捷方便，而銳角則會對眼睛造成過多的影響，不易處理。
2. 圓角更加具有安全感和親密性，這一點我們可以聯想到生活中對我們具有傷害性和威脅的物品，例如剪刀、危險標示等等。
3. 圓角的弧度符合人眼和頭部的自然運動，具有良好的引導性；在卡片中能夠清晰區分卡片的邊界，且圓角具有優秀的內指向性，更加凸顯卡片中的內容信息。

通欄卡片和圓角卡片區別我們可以簡單理解為：通欄卡片利用空間更加充分，而圓角卡片的識別性更好，最后我們再記住一點，通欄卡片的沉浸感較強。

參考鏈接：

• Material Design 2來了？比圓更圓，圓了又圓：https://zhuanlan.zhihu.com/p/35063573
• 從圖標轉角論親和力的差異 【含圖標教程】：https://www.zcool.com.cn/article/ZNDcwNTI4.html
• 無框界面：https://zhuanlan.zhihu.com/p/24771017
• 用戶體驗設計之圓角和直角：http://blog.sina.com.cn/s/blog_5d7170af0101dnpk.html
• 淺析圓角特征在產品設計中的應用-嚴偉杰：http://www.doc88.com/p-9592118891884.html
• 從圓角角到圓角：https://mp.weixin.qq.com/s/j3iAigMJitiIT2yfBHF3CA
• 西瓜視頻 3.0改版總結：https://www.zcool.com.cn/work/ZMzExMTcxMDg=.html

本文由 @姜正 原創發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議。

、CSS陰影（box-shadow）

1.盒子陰影

語法
box-shadow:h-shadow v-shadow blur spread color inset;

• 默認為外陰影(outset)，但是不可以寫這個單詞，否則無效
• 盒子陰影不占用空間，不會影響其他盒子排列
• 鼠標經過div為div:hover {box-shadow: 10px 10px;}

2.文字陰影（text-shadow）

語法
text-shadow：h-shadow v-shadow blur color；

三、圓角邊框（border-radius）

語法
border-radius：length;

• 半徑原理：圓與邊框的交集形成圓角效果
• 參數值可以為數值或百分比形式
• 若為正方形，想設置為圓，把數值改為高/寬的一半，或直接寫為50%
• 若為矩形，設為高的一半即可
• 該屬性是一個簡寫屬性，可以跟四個值，分別代表左上角，右上角，右下角，左下角
• 分開寫：border-top-left-radius | border-top-right-radius
  border-bottom-left-radius | border-bottom-right-radius