我是枣枣，这里是我的复盘笔记本。

2020年  第 5  篇  干货分享今天来讨论一下，绘制UI元素时，描边到底用内部、居中还是外部？Sketch前一段时间在整理网页设计规范的时候，想到描边对于产品有哪些可设计的场景…… Menu 01：对齐方式02：内描边03：外描边04：中心描边05：总结 0 1  对齐方式

工作交接工具“蓝湖”上只能点击被描边的元素本身，并不能点击带描边后的整个元素(除非同时包含在切图里)，所以在使用代码时，是根据其本身的大小位置数据来设置的(粗心大意的开发可能直接复制右侧的代码了)。

 0 2  内描边

通常内描边的元素高度是固定的，因为需要使整体风格得到统一，所以通常我们会在某一个水平区域中，设置一个统一的元素间距，让元素之间或元素与父框架有一种和谐共生的状态。

 按钮组 Buttons、输入框 Inputs、选项类控件 Selections当控件处于被鼠标悬浮的状态用户与系统的交互反馈 0 3  外描边前面对齐方式也说了描边是不会显示其大小和位置的，所以外描边在网页设计中主要用于一些临时出现的情况，比如一些输入设备的交互行为。按钮按下/焦点状态文本域焦点状态文本域焦点状态通常会使用发光代替外描边，顺便也提一下。表示当前选中项在列表中使用卡片风格时，可以用外描边表示当前卡片被选中。某元素的特殊状态Instagram中如果有关注的用户正在直播或者是发布了Story，那么他的头像就会有一个彩色的外圈，虽然不是严格意义上的外描边，但对比自己的story，还是有本质上的区别。 0 4  中心描边使用到center描边的情况挺特殊的，本来用到的地方就很少，可能文本类型的元素需要描边，比如背景图会有和文字重叠的可能，或者是追求一些特殊样式时，我们可以使用，当然用阴影也是完全可以代替的。 0 5  开发平台与开发方式因为不同引擎兼容CSS样式的程度不同，所以在HTML项目中三种描边效果都可以轻松实现。如果是其他不兼容CSS的平台，那么外描边就是主流的直接开发的方式，其他两种方式通常开发会要求设计师进行单独切图。 0 6  总结设计任何一个项目之前，需要了解一下引擎是否支持CSS样式。然后，设计稿中我们大部分使用的是内描边。外描边主要是一些鼠标状态，设备是否有状态。