如何制作这样的 CSS 渐变和鼠标悬停边框答案

【问题标题】：How can I make a css gradient like this and mouseover border如何制作这样的 CSS 渐变和鼠标悬停边框
【发布时间】：2017-03-25 17:57:43
【问题描述】：

我需要帮助复制像这样的三个按钮，我最关心的是如何使渐变看起来完全像它们的样子。我也很好奇如何在鼠标悬停或按钮单击上放置白色边框

我尝试了这个渐变代码，但我得到的只是中间有一条粗白线。任何帮助将不胜感激

#blue{
  background: linear-gradient(#00a1d6, white , #00a1d6);
}
#yellow{
  background: linear-gradient(#df8700, white , #df8700);
}
#red{
  background: linear-gradient(#950f16, white , #950f16);
}

【问题讨论】：

标签： jquery html css gradient

【解决方案1】：

$(".square"/*button class or id*/).hover(function(){
    $(this).css("border","2px solid #fff;")
},function(){
    $(this).css("border","none")
});

【讨论】：

【解决方案2】：

根据 DOM 的构造方式，您可能希望避免使用边框，因为有时边框粗细会在屏幕上移动元素。尝试使用 box-shadow。

#blue:hover,
#yellow:hover,
#red:hover,
#blue:active,
#yellow:active,
#red:active {
  box-shadow: inset 0 0 1px 2px white;
}

或者给每个按钮一个类来简化css

.button-class:hover,
.button-class:active {
  box-shadow: inset 0 0 1px 2px white;
}

【讨论】：

【解决方案3】：

知道了，在玩弄之后我想出了解决方案。

#color{
    background: ... (#00a1d6 0%, #55b7d6 45% , #00a1d6 0%);
      }

【讨论】：

【解决方案4】：

#color {
    background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
    background: linear-gradient(red, yellow); /* Standard syntax */
}

你可能想要这样的东西。

【讨论】：