斜面突出顯示沒有附加標記

您是否看到頂部的薄斜面突出顯示？你如何在只有一個HTML標籤的CSS中做到這一點？我猜這跟outline有關。這是我迄今爲止沒有斜角：

<a class="callToAction">Click here</a> 

.callToAction { 
border: 1px solid #000; 
-moz-border-radius: 0.4em; 
background: -moz-linear-gradient(
    top, 
    #ccc, 
    #999 
); 
}

來源

2011-03-06 JoJo

當你到底要突出呢？懸停？活性？或永久？ – BalusC 2011-03-06 02:21:01

沒關係。 – JoJo 2011-03-07 22:22:44

剛剛發現通過檢查的來源，你可以指定一個陰影作爲插入：

.inset { 
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 
      0 0 2px rgba(255, 255, 255, 0.3) inset, 
      0 1px 2px rgba(0, 0, 0, 0.29) 
}

enter image description here

來源

2011-07-03 20:31:36 JoJo

要創建斜角，您必須使用CSS3半徑和陰影屬性的組合。要將鼠標懸停在按鈕上時需要使用僞選擇器：hover。

從http://www.whitedogdesigngroup.com/blog/entry/a_better_button_with_css3/

callToAction { 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
    border-radius: 15px; 
    text-shadow: 0 -2px #791c13; 
    -moz-box-shadow: 0 1px 1px #ddd, 0 -1px 1px #555; 
    -webkit-box-shadow: 0 1px 1px #ddd, 0 -1px 1px #555; 
    box-shadow: 0 1px 1px #ddd, 0 -1px 1px #555; 
} 

callToAction:hover { 
    margin-bottom: 1px; 
    height: 29px; 
    position: relative; 
    top: 1px; 
    color: #eee !important; 

    -moz-box-shadow: 0 1px 1px #eee, 0 -2px 1px #555; 
    -webkit-box-shadow: 0 1px 1px #eee, 0 -2px 1px #555; 
    box-shadow: 0 1px 1px #eee, 0 -2px 1px #555; 
}

如果您需要進一步的解釋按鈕代碼...

CSS3邊框的說明：http://doctype.tv/borders

CSS3陰影的說明：http://doctype.tv/css3

來源

2011-03-06 04:26:44 Tom

如果我使用雙盒陰影，那麼IE根本就沒有邊框。 – JoJo 2011-03-07 22:23:53

斜面突出顯示沒有附加標記

回答

相關問題