css 日历 - td 背景对 Angular 线分割 - 两种颜色

Question

我在 jsfiddle 找到了一个 css 风格的日历，想添加一些特定的 td 背景，比如这里的对 Angular 线分割 jsfiddle .

但结合起来看起来很扭曲jsfiddle .

HTML:

  <table>
  <thead>
  <tr>
      <th colspan="8">
          Oktober 2011
      </th>
  </tr>
  </thead>
  <tbody>
  <tr>
      <th class="cw">KW</th>
      <th>Mo</th>
      <th>Di</th>
      <th>Mi</th>
      <th>Do</th>
      <th>Fr</th>
      <th>Sa</th>
      <th>So</th>
  </tr>
  <tr>
      <td class="cw">39</td>
      <td class="off">26</td>
      <td class="off">27</td>
      <td class="off">28</td>
      <td class="off">29</td>
      <td class="off">30</td>
      <td class="free">1</td>
      <td class="free">2</td>
  </tr>
  <tr>
      <td class="cw">40</td>
      <td class="free">3</td>
      <td class="free">4</td>
      <td class="free">5</td>
      <td class="free">6</td>
      <td class="free">7</td>
      <td class="booked_pm">8</td>
      <td class="booked">9</td>
  </tr>
  <tr>
      <td class="cw">41</td>
      <td class="booked">10</td>
      <td class="booked">11</td>
      <td class="booked">12</td>
      <td class="booked">13</td>
      <td class="booked">14</td>
      <td class="booked_am">15</td>
      <td class="free">16</td>
  </tr>
  <tr>
      <td class="cw">42</td>
      <td class="free">17</td>
      <td class="free">18</td>
      <td class="free">19</td>
      <td class="free">20</td>
      <td class="free">21</td>
      <td class="free">22</td>
      <td class="free">23</td>
  </tr>
  <tr>
      <td class="cw">43</td>
      <td class="free">24</td>
      <td class="free">25</td>
      <td class="free">26</td>
      <td class="free">27</td>
      <td class="free">28</td>
      <td class="free">29</td>
      <td class="free">30</td>
  </tr>
  <tr>
      <td class="cw">44</td>
      <td class="free">31</td>
      <td class="off">1</td>
      <td class="off">2</td>
      <td class="off">3</td>
      <td class="off">4</td>
      <td class="off">5</td>
      <td class="off">6</td>
  </tr>
  </tbody>

CSS:

body {
background-color: #f4f4f4; }

table {
-webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
-ms-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
-o-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
border-spacing: 0;
font-family: 'Helvetica Neue';
width: 239px; }

table thead th {
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
-ms-border-radius: 1px;
-o-border-radius: 1px;
border-radius: 1px;
-webkit-box-shadow: inset 0 1px 0 0 #e88486;
-moz-box-shadow: inset 0 1px 0 0 #e88486;
-ms-box-shadow: inset 0 1px 0 0 #e88486;
-o-box-shadow: inset 0 1px 0 0 #e88486;
box-shadow: inset 0 1px 0 0 #e88486;
background-color: #e56568;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e56568), color-stop(100%, #bd3f41));
background-image: -webkit-linear-gradient(top, #e56568, #bd3f41);
background-image: -moz-linear-gradient(top, #e56568, #bd3f41);
background-image: -ms-linear-gradient(top, #e56568, #bd3f41);
background-image: -o-linear-gradient(top, #e56568, #bd3f41);
background-image: linear-gradient(top, #e56568, #bd3f41);
border: 1px solid #ac2826;
color: white;
font-size: 13pt;
font-weight: 400;
padding: 8px 0;
text-align: center;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3); }

table tbody th {
-webkit-box-shadow: inset 0 1px 0 0 white;
-moz-box-shadow: inset 0 1px 0 0 white;
-ms-box-shadow: inset 0 1px 0 0 white;
-o-box-shadow: inset 0 1px 0 0 white;
box-shadow: inset 0 1px 0 0 white;
background-color: #f5f5f5;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #e8e8e8));
background-image: -webkit-linear-gradient(top, #f5f5f5, #e8e8e8);
background-image: -moz-linear-gradient(top, #f5f5f5, #e8e8e8);
background-image: -ms-linear-gradient(top, #f5f5f5, #e8e8e8);
background-image: -o-linear-gradient(top, #f5f5f5, #e8e8e8);
background-image: linear-gradient(top, #f5f5f5, #e8e8e8);
border-bottom: 1px solid #d4d4d4;
color: #666666;
font-size: 7.5pt;
font-weight: normal;
padding: 4px 0;
text-align: center;
text-shadow: 0 1px 0 #ffffff;
text-transform: uppercase;
width: 34px; }

table tbody th:first-child {
border-left: 1px solid #abb6bf; }
table tbody th:last-child {
border-right: 1px solid #abb6bf; }
table tbody td {
background-color: #fcfdfd;
border-bottom: 1px solid #e2e2e2;
border-left: 1px solid #e2e2e2;
color: #444444;
font-size: 11pt;
font-weight: bold;
height: 27px;
padding: 0;
text-align: center;
width: 34px; }
table tbody td.off {
color: #9ea2a7; }
table tbody td:last-child {
border-right: 1px solid #abb6bf; }
table tbody td:first-child {
border-left: 1px solid #abb6bf; }
table tbody td:not(:last-child) {
-webkit-box-shadow: inset -1px 0 0 0 #eeefef;
-moz-box-shadow: inset -1px 0 0 0 #eeefef;
-ms-box-shadow: inset -1px 0 0 0 #eeefef;
-o-box-shadow: inset -1px 0 0 0 #eeefef;
box-shadow: inset -1px 0 0 0 #eeefef; }

table tbody th.cw {
border-bottom: none; }

table tbody td.cw {
background-color: #e8e8e8;
border-bottom: none;
color: #666666;
font-size: 7.5pt;
font-weight: normal;
text-align: center;
text-shadow: 0 1px 0 #ffffff;
text-transform: uppercase; }

table tbody td.free {
background-color: #007700;
color: #fff; }

table tbody td.booked {
background-color: #c43c35;
color: #fff; }

table tbody td.booked_am, table tbody td.booked_pm {
height: 27px !important;
display: inline-block;
background: transparent; }

table tbody td.booked_am {
line-height: 0%;
width: 0px;
background-color:#007700;
border-top: 27px solid transparent;
border-right: 32px solid #c43c35;
color: #fff; }

table tbody td.booked_pm {
line-height: 0%;
width: 0px;
background-color:#007700;
border-top: 27px solid #c43c35;
border-right: 32px solid transparent;
color: #fff; }

也许你们中有人可以提供帮助。

谢谢

Answer 1

由于您似乎在使用 CSS3，我已经使用 CSS3 渐变更新了您的 fiddle :http://jsfiddle.net/9pS3L/1/这似乎是你想要达到的目标。你应该用你自己的颜色更新它。这是一个不错的渐变工具:http://www.colorzilla.com/gradient-editor/甚至应该是 IE compatbile，但会产生水平渐变(虽然还没有尝试过......)

您还可以使用 SASS 和 compass，它们也是制作 CSS3 的好工具。

尝试用边框实现您想实现的目标是很棘手的，因为这并不是首先构建边框的目的。

仅举个例子，webkit代码:

div{
    width:20px;
    height:20px;
    background: -webkit-gradient(linear, left top, right bottom, color-stop(50%,red), color-stop(50%,green));
}