css 中的边框半径和背景颜色冲突

Question

看到这个 JSFIDDLE。我正在使用 jqueryUI 日期选择器。如您所见，所选日期如下所示：

这是我的代码：

  .ui-state-highlight,
  .ui-widget-content .ui-state-highlight,
  .ui-widget-header .ui-state-highlight {
    border: 0;
    background: red;
    color: #ffffff;
    border-radius: 25px;
    text-align: center;
    background: red;
  }

我正在寻找使 td 看起来像这样的解决方案。

记住 background-color 和 border-color 是不一样的。

注意：不建议使用精灵图等

请只回答css。

Answer 1

border-radius和background-color之间没有冲突。下面的例子 border-radius 在一个标签上实现并且你想在 td 中添加背景所以两个元素是分开的，如下所示：

 <a class="ui-state-default ui-state-highlight" href="#">19</a>
<td class=" ui-datepicker-days-cell-over  ui-datepicker-today" onclick="DP_jQuery_1484829217856.datepicker._selectDay('#datepicker',0,2017, this);return false;"><a class="ui-state-default ui-state-highlight" href="#">19</a></td>

所以你想覆盖 css 的地方需要在 css 中添加 !impotent。下面我更新了 JSFIDDLE 的代码。可能对你有帮助。

已解决 link : http://jsfiddle.net/6qLmnkac/7/

Answer 2

检查 this - 如果您对 td{position:relative}

没有问题

Answer 3

我想您需要不同的背景颜色，这就是 border-radius: 25px 0 0 25px; 不适合您的原因。一种解决方案是 select 背景并更改其渐变。我已经使用 http://www.cssmatic.com/gradient-generator 生成了 color-gradient.

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  border: 0;
  
  color: #ffffff;
  border-radius: 25px;
  text-align: center;
  
}
.ui-datepicker td {
    border: 0;
    padding: 0px;
}

//Create the gradient for the td here-- only for the selected date
//At the end date, reverse the gradient and it will look almost like the picture you shared. 
 .ui-datepicker-today {
 background: rgba(105,84,68,1);
background: -moz-linear-gradient(left, rgba(105,84,68,1) 47%, rgba(173,217,120,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(47%, rgba(105,84,68,1)), color-stop(100%, rgba(173,217,120,1)));
background: -webkit-linear-gradient(left, rgba(105,84,68,1) 47%, rgba(173,217,120,1) 100%);
background: -o-linear-gradient(left, rgba(105,84,68,1) 47%, rgba(173,217,120,1) 100%);
background: -ms-linear-gradient(left, rgba(105,84,68,1) 47%, rgba(173,217,120,1) 100%);
background: linear-gradient(to right, rgba(105,84,68,1) 47%, rgba(173,217,120,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#695444', endColorstr='#add978', GradientType=1 );
 }

Answer 4

最后仅用 css 完成了此操作，请参阅此处的 FIDDLE 需要玩一下 position 和 after.

$("#datepicker").datepicker();

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  border: 0;
  border-radius: 25px;
  text-align: center;
}
td {
  position: relative;
  z-index: 1111;
}
a.ui-state-default.ui-state-highlight:after {
  content: "";
  background: green;
  height: 23px;
  width: 25px;
  position: absolute;
  z-index: -1;
  right: 0;
  top: 1px;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>

  <div class="demo">

    <p>Date:
      <input id="datepicker" type="text">
    </p>

  </div>
  <!-- End demo -->

  <div style="display: none;" class="demo-description">
    <p>The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If
      a date is chosen, feedback is shown as the input's value.</p>
  </div>
  <!-- End demo-description -->
</body>

</html>

css 中的边框半径和背景颜色冲突

border-radius and background-color conflict in css

jquery

html

css

jquery-ui-datepicker