我们怎么可能创造这个 ui 概念呢？ [关闭]答案

【问题标题】：How could we possibly create this ui concept? [closed]我们怎么可能创造这个 ui 概念呢？ [关闭]
【发布时间】：2015-05-15 01:35:27
【问题描述】：

看到这个UI Concept，忍不住赞叹它的美。

我想知道是否可以创建一个 Button 来制作（遮罩）它们下方的控件，以使它们在该区域中看起来透明。（在本例中为 UITextField）

请看下面这张图片

知道这是否可以通过代码完成？请看按钮如何使 UITextField 变得透明，有边距。

【问题讨论】：

标签： ios user-interface uikit calayer uibezierpath

【解决方案1】：

您将完全按照您刚才所说的方式进行操作 - 使用面具。附加到图层（或视图）的蒙版可以通过该视图及其子视图打洞。在这种情况下，那个洞是一个圆。

这是一个示例：两个 UITextField，在一个视图中，其掩码在它们的末端切出一个圆形孔：

我没有添加复选标记图像，但几乎相同。

【讨论】：

请问有示例代码或链接吗？感谢您的回复
例如，在这里查看我的答案：stackoverflow.com/a/23452614/341994
添加了示例图片。
@matt 太完美了！！感谢您的帮助！

【解决方案2】：

下面是一个快速简单的示例，说明如何使用 CSS3 创建这样的 UI 概念：

.inputfield {
	width: 300px;
	height: 50px;
	line-height: 40px;
	padding: 8px;
	font-size: 20px;
	margin-top: 5px;
	border-collapse: collapse;
	border: 6px solid #000;
}
span.okcircle {
	display: inline-block;
	border: 6px solid #fff;
	background: #DF01A5;
	border-radius: 50%;
	width: 70px;
	height: 70px;
	margin-top: 24px;
	margin-left: 270px;
	z-index: 9;
	position: absolute;	

}

<span class="okcircle"> </span>
<div><input type="text" placeholder="username" class="inputfield"></div>
<div><input type="password" placeholder="password" class="inputfield"></div>

这是输出：

【讨论】：

这只是一个简单的例子。您可以进一步修改它以在input 元素周围添加border-radius，您也可以稍后添加图标和其他内容..