【CSS美化专题】单选框组件美化——在拟物化的岔路上越走越远

先来点题外话，不知道大家有没有跟我一样的感觉，自从苹果带了扁平化的节奏，互联网的世界似乎所有的UI都被“如来神掌”给压扁了，近乎所有你看到的用户界面，甚至连Winform的界面，都成了一张薄薄的纸。一开始的确有点新鲜感，但随着时间流逝，大家似乎也逐渐厌倦这种没有Z轴的界面，“轻拟物”、“新拟物”等设计风格也开始冒出来走上舞台。这次拟物化风潮，似乎仍旧保持着扁平化设计的克制，只是稍微用了一点渐变和阴影，就能使扁平的界面看起来没有那么地“扁平”，光源这一概念重新回到了设计师的视野。


我们回到正题，这次我们来对单选框组件“动刀子”。

让我们看下原生组件

除了“系统样式”外，活字格有3个预设样式，“现代”、“开关”、“按钮”，这三个样式都有各自对应的使用场景，因此我们这次对这三个样式进行改造

先来看现代样式，它的类名是 fgc-radio-modern。它有4个状态：一般、鼠标停留、选中、选中时焦点

为了让他看起来能够“跃然于纸上”，我们想象一下，假如它的三个选项是三个凹槽，然后我们把一块圆柱形的物体放在这个凹槽里，完成了选择。基于这样的一个想象，为让其有如实物般的质感，我们重构它的两个状态的样式

一般状态——凹下去，就像一个凹槽一样
选中状态——有一块带颜色的圆柱形物体放在这个凹槽里

但这时候怎么使一个平面的形状产生立体的质感呢？我们首先要定义一个光源角度，一般来讲，左上方45°角的光源是最常见的，也是最简单的。

我们假定我们的凹槽深度为1px，在45°角的光源下，我们很方便地就能得出阴影宽度也同样为1px，即Ws=d而因为光源不仅在Z轴上的角度是45°，在X Y轴上同样也是45°，因此我们同样可以得出X=Y

1. box-shadow: inset 1px 1px 0px 0px #000;

复制代码

因为这种效果在现实中不可能存在，除非光源无限强，所以看着实在生硬，我们需要给他加一个模糊(blur)

1. box-shadow: inset 1px 1px 1px 0px #000;

复制代码

但是加了模糊之后，似乎这个凹槽的深度更深了，所以为了减轻模糊带来的影响，我们稍微减少X和Y的值

1. box-shadow: inset 0.8px 0.8px 1px 0px #000;

复制代码

这时候这个凹槽已经看着比较自然了，但是自然界是不存在单纯的直射光源的，还有一系列漫反射、环境光等等。因此，我们至少要为这个凹槽再添加上一层无偏移的阴影，以使其尽可能地模拟自然界的光源，让它的边缘更加明显

1. box-shadow: inset 0.8px 0.8px 1px 0px #000,
   
2.                       inset 0px 0px 1px 0px #000;

复制代码

现在处理它的选中状态。按照我们之前的想象，选中状态的单选框它是一个圆柱体，嵌于这个凹槽内，这时候光线成了这样

这个圆柱体它将有一个外阴影，且直对光线的一角会有一个高光

1. box-shadow:1px 1px 1px 0 #000,
   
2.                 1px 1px 1px -1px #fff inset;

复制代码

这时候我们发现了一个问题，内阴影和外阴影之间还隔着一个边框，这使得这个圆柱体看起来有点变形。因此我们可以把border设置为none，并用阴影来模拟边框

1. box-shadow:1px 1px 1px 0 #000,
   
2.                 1px 1px 1px -1px #fff inset,
   
3.                 0 0 0 1px currentColor; /*这里的currentColor即设计器中定义的前景色*/

复制代码

现在看起来，是不是已经有实物的质感了呢？

好了，方法论结束
上成品


附件demo和源码自取

游客，如果您要查看本帖隐藏内容请回复

第一期：【CSS美化专题】用CSS美化表格删除按钮
第二期：【CSS美化专题】原生日历控件美化  
第三期：【CSS美化专题】单选框组件美化——在拟物化的岔路上越走越远
第四期：【CSS美化专题】更美观的下拉窗口
第五期:  【CSS美化专题】不一样的菜单用法
第六期:  【CSS美化专题】图文列表的妙用

学习学习，学习学习