查看此 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 给出答案。
最佳答案
我想您需要不同的背景颜色,这就是为什么 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 );
}
关于jquery - css 中的边框半径和背景颜色冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41739914/