jquery - CSS边框/盒子阴影挑战

Question

我正在使用 div 创建三列，并且我正在摆弄边框和插入框阴影。我似乎无法做到正确。我需要它看起来像这样：

这是我到目前为止所拥有的（忽略单选按钮）：Fiddle。问题是中心列 - 左侧插入框阴影和边框以及底部时隙看起来不太正确。

.CalendarCon.num2 .timeSlot {box-shadow: 1px 0px 1px 0 #fff}

我错过了什么？（顺便说一句，这些列并不总是具有相同的高度。）

如果需要 jQuery 就可以了。

Answer 1

这个例子对你有用吗？

我使用label了 s 而不是divs（使每个框都可点击），摆脱了对 css3 选择器的需要（欢迎使用 IE8），并减少了 CSS：

.CalendarCon {float:left;width:112px;background-color:#eaeaeb;}
.CalendarCon .timeSlot, .CalendarCon h3 { font-size:12px; margin:0; border-top:1px solid #d6d6d6; border-right:1px solid #d6d6d6; box-shadow: 1px 1px 1px 0 #fff inset; text-align:center; display:block; padding:15px 10px; text-align:center;}
.CalendarCon {border-left:1px solid #d6d6d6; margin-left:-1px; border-bottom:1px solid #d6d6d6;}
.CalendarCon .timeSlot:hover {background-color:rgba(0,0,0,0.02);}
.CalendarCon .timeSlot input {display:block; clear:both;  margin:auto; border:1px solid #eee;}

Answer 2

如果将以下 2 种样式更改为

.CalendarCon {float:left;width:112px;background-color:#eaeaeb; border-bottom:1px solid #ffffff;}
.CalendarCon .timeSlot:last-child {border-bottom:1px solid #d6d6d6;}

你应该达到你想要的

（ps不知道为什么你想要底部的白线，因为它与阴影效果的其余部分不匹配）

Answer 3

尝试修改这个：

.CalendarCon h3 {
    font-size:12px;
    text-align:center;
    box-shadow: 1px 0px 0px 0 #fff, 1px 1px 1px 0 #fff inset;
    border:1px solid #d3d3d3;
    height:40px;
    margin-bottom:0;
    border-bottom:0;
}
.CalendarCon .timeSlot {
    border:1px solid #d6d6d6;
    border-bottom:0;
    box-shadow: 1px 0px 0px 0 #fff, 1px 1px 1px 0 #fff inset;
    text-align:center;
    padding:15px 10px;
}
.CalendarCon .timeSlot:last-child {
    border-bottom:1px solid #d6d6d6;
}

小提琴

希望这有帮助。