我们怎么可能创造这个ui概念？

Question

我遇到了这个UI概念，我无法帮助，只能欣赏它的美丽。

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

请看下面的图片

是否可以通过代码完成此操作？ 请查看按钮如何使UITextField变得透明并带有边距。

Answer 1

你会按照你刚才所说的方式完成它 - 使用面具。附加到图层（或视图）的蒙版可以在该视图及其子视图中形成一个洞。在这种情况下，那个洞是一个圆圈。

以下是一个示例：两个UITextField，在一个视图中，其掩码在其末尾切出一个圆孔：

我没有添加复选标记图片，但这只是更多相同。

Answer 2

以下是一个快速而简单的示例，介绍如何使用CSS3创建此类UI：zh

＆＃13;

＆＃13;

.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;	

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这是输出：