创建具有透明边框的按钮,该按钮仅位于按钮的第二部分
想要实现
我有一个0.8透明的标题和一个相同颜色的边框为0.8的按钮.
按钮需要对齐,以使中心等于标题的底部.
问题
当您在一个相同颜色的标题上放置一个0.8透明边框,并且0.8透明度时,它会变得更暗.
可能解决方案
https://jsfiddle.net/extranion/fnz1ccf0/2/
* {
margin:0; padding:0;
}
body {
background-image: url("http://gallery.photo.net/photo/8551440-md.jpg");
}
button {
background:none; border:none;
}
header {
height:100px;
background-color: rgba(41, 52, 61, .8);
}
.contact {
float:right;
height:100px;
width:200px;
position:relative;
}
.wrap-btn {
position:absolute;
top:100%;
left:50px;
height:30px;
width:100px;
border-radius: 0 0 20px 20px;
background-color: rgba(41, 52, 61, .8);
}
button {
position:absolute;
bottom:10px;
left:10px;
width:80px;
height:40px;
background:orange;
border-radius:15px;
}<body>
<header>
<div class="contact">
lorem ipsum
<div class="wrap-btn">
<button>inloggen</button>
</div>
</div>
</header>
</body>题
有没有更好的解决方案,只有底部有边框？
不确定这是否是更好的解决方案，但它是一种不同的方法。使用后元素和渐变：
button {
top: 100%;
position: absolute;
width: 90px;
margin-top:-28px;
height:56px;
border-radius:0px 0px 14px 14px;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 49%,rgba(41, 52, 61, .8) 50%,rgba(41, 52, 61, .8) 100%);
}
button:after{
content:'login';
position:absolute;
left:10px;
top:10px;
width:70px;
height:15px;
padding:10px 0px;
background:orange;
border-radius:10px;
}
https://jsfiddle.net/dm8654ga/1/
使用渐变可能是一个好方法，也可以使用 after 元素 - 我唯一不喜欢的是我使用了文本的 content 属性 -> 使得翻译等变得困难。
PS：如果边框不是圆形的，整个事情会容易得多（使用boxshadows..）