jquery - 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 是不一样的。

注意:不建议使用图片 Sprite 等

请仅使用 css 给出答案。

Answer 1

我想您需要不同的背景颜色，这就是为什么 border-radius: 25px 0 0 25px; 对您不起作用。一种解决方案是选择背景并更改其渐变。我用过http://www.cssmatic.com/gradient-generator生成颜色渐变。

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