CSS边框/框影挑战

Question

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

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

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

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

如果需要jQuery，那就没关系。

Answer 1

THIS EXAMPLE是否适合您？

我使用label而不是div s（使每个框可点击），摆脱了对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

如果您将以下两种样式更改为

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

You should achieve what you want

（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;
}

<强> FIDDLE

希望得到这个帮助。