-3
我怎样才能实现这种效果的文字输入与CSS?做一个输入从右凹和从左凹凸起
我怎样才能实现这种效果的文字输入与CSS?做一个输入从右凹和从左凹凸起
你可以用input
和使用pseudo
元素,使其curved
为弧形阴影您可以使用inset
box-shadow
和input
你可以添加padding
* {
box-sizing: border-box;
}
div {
display: inline-block;
position: relative;
height: 40px;
}
div:after {
content: '';
width: 40px;
height: 100%;
left: 92%;
top: 0;
border-radius: 50%;
background: white;
position: absolute;
box-shadow: inset 2px 0px 0px 0px rgb(184, 170, 170);
}
div input {
width: 100%;
height: 100%;
border: 0;
display: inline-block;
border-radius: 30px 0px 0px 30px;
background: #343434;
padding: 10px;
color: white;
font-size: 20px;
box-shadow: 2px 1px 3px 0px rgb(184, 170, 170);
}
<div>
<input type="text" />
</div>
为什么 - 你能解释一下吗? – 2015-01-04 14:38:45
什么都有你已经试过了? – BenM 2015-01-04 14:10:24
这可以完成,但请向我们展示您的努力。 – Harry 2015-01-04 14:10:28
@哈里,是否有可能通过如何做到这一点来展示你的意思?它不知道从哪里开始,也很想看到这一点。 – razorsyntax 2015-01-04 14:23:59