Jquery CSS边框/框阴影挑战

我用div创建了三个列，并稍微修改了边框和插入框阴影。我好像就是做不好。我需要它看起来像这样：

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

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

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

---

如果需要jQuery，则可以。

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

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

---

（ps不确定为什么要在底部显示白线，因为它与阴影效果的其余部分不匹配）

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

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

（ps不确定为什么要在底部显示白线，因为它与阴影效果的其余部分不匹配）

尝试修改此选项：

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

希望有此帮助。

尝试修改此选项：

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

希望这对你有帮助。

对你有用吗

我使用了

label

s而不是

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

对你有用吗

我使用了

label

s而不是

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

---

如果删除插入框阴影会怎么样？如果删除插入框阴影会怎么样？事实上，把div改成标签让我的生活轻松多了。为什么我以前没想到呢？绝妙的解决方案。非常感谢，伙计。事实上，把div改成标签让我的生活轻松多了。为什么我以前没想到呢？绝妙的解决方案。非常感谢，伙计。