[英]How can I make a css gradient like this and mouseover border
我需要幫助復制這樣的三個按鈕,我最擔心的是如何使漸變看起來與它們完全一樣。 我也很好奇如何在鼠標懸停或按鈕點擊上放置白色邊框
我嘗試了這個代碼用於漸變,但我得到的只是一條粗白線雖然在中間。 任何幫助將不勝感激
#blue{ background: linear-gradient(#00a1d6, white , #00a1d6); } #yellow{ background: linear-gradient(#df8700, white , #df8700); } #red{ background: linear-gradient(#950f16, white , #950f16); }
$(".square"/*button class or id*/).hover(function(){
$(this).css("border","2px solid #fff;")
},function(){
$(this).css("border","none")
});
根據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; }
#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 */
}
你可能想要這樣的東西。
知道了,在玩完之后我想出了解決方案。
#color{
background: ... (#00a1d6 0%, #55b7d6 45% , #00a1d6 0%);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.