[英]“Outward” border-radius in css?
Currently, the links at the top of my website look like this: 目前,我网站顶部的链接如下所示:
However, I am trying to "round" the bottom edges of the buttons to make it look like they are coming out of the page and into the ribbon at the top. 但是,我试图“围绕”按钮的底部边缘,使它看起来像是从页面出来并进入顶部的功能区。
I am aware that you can hack it and add a "separator" div with rounded corners between each entry, but this would be difficult to do seeing at the borders used are not all from the same div. 我知道你可以破解它并在每个条目之间添加一个带有圆角的“分隔符”div,但这很难看到所使用的边界并非都来自同一个div。 Also, it wouldn't be easy seeing as my buttons are very close to each other. 此外,由于我的按钮彼此非常接近,因此看起来并不容易。
The css for the "button": “按钮”的CSS:
.button {
border-top: 3px solid #A1C1BE;
border-left: 3px solid #A1C1BE;
border-right: 3px solid #A1C1BE;
border-bottom: 0px;
padding: 5px 8px 5px 8px;
margin: 0 0 -9px 0;
border-radius: 5px 5px 0 0;
font-size: 12px;
font-family: 'PT Sans', sans-serif;
background-color: #f8f8ff;
color: #484848;
}
css for the "ribbon": css为“功能区”:
#top-wrapper {
border-bottom: 5px solid #A1C1BE;
width: 100%;
background-color: #59554E;
padding: 10px 0 0 0;
color: #C0C0A8;
}
As you can see, the thicker border belongs to the ribbon which stretches the length of the webpage, whereas the thinner blue border is part of the button. 如您所见,较粗的边框属于拉伸网页长度的功能区,而较薄的蓝色边框属于按钮的一部分。
通过对每个按钮应用box-shadow
可以创建所需的效果,通过应用3d变换和perspective
属性可以使3d效果更加炫酷
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.