css中的“向外”边界半径?

时间:2011-11-15 04:59:04

标签: html css button css3

目前,我网站顶部的链接如下所示:

enter image description here

但是,我试图“围绕”按钮的底部边缘,使它看起来像是从页面出来并进入顶部的色带。

我知道你可以破解它并在每个条目之间添加一个带有圆角的“分隔符”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;
}

如您所见,较粗的边框属于拉伸网页长度的色带,而较薄的蓝色边框属于按钮的一部分。

1 个答案:

答案 0 :(得分:1)

通过对每个按钮应用box-shadow可以创建所需的效果,并且通过应用3d变换和perspective属性

可以使3d效果更加炫酷