gpt4 book ai didi

css - 创建带有透明边框的按钮,该边框仅位于按钮的第二部分

转载 作者:技术小花猫 更新时间:2023-10-29 11:43:45 25 4
gpt4 key购买 nike

想要实现

我有一个透明度为 0.8 的标题和一个边框为 0.8 且颜色相同的按钮。

按钮需要对齐,以便中心等于标题的底部。

good

问题

当您将 0.8 透明度边框放置在颜色相同且透明度为 0.8 的页眉上时,它会变得更暗。 wrong

可能的解决方案

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:如果边框不是圆 Angular 的,整个事情会容易得多(使用 boxshadows..)

关于css - 创建带有透明边框的按钮,该边框仅位于按钮的第二部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31410287/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com