目前,我网站顶部的链接如下所示:
但是,我试图“围绕”按钮的底部边缘,使它看起来像是从页面出来并进入顶部的色带。
我知道你可以破解它并在每个条目之间添加一个带有圆角的“分隔符”div,但这很难看到所使用的边界并非都来自同一个div。此外,由于我的按钮彼此非常接近,因此不容易看到。
“按钮”的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:
#top-wrapper {
border-bottom: 5px solid #A1C1BE;
width: 100%;
background-color: #59554E;
padding: 10px 0 0 0;
color: #C0C0A8;
}
如您所见,较粗的边框属于拉伸网页长度的色带,而较薄的蓝色边框属于按钮的一部分。
答案 0 :(得分:1)
通过对每个按钮应用box-shadow
可以创建所需的效果,并且通过应用3d变换和perspective
属性