斜角突出显示，没有额外的标记

Question

你看到顶部的薄斜面突出显示了吗？如何在CSS中只使用一个HTML标记？我猜这与outline有关。这是我到目前为止没有斜角的东西：

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

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

Answer 1

要创建斜角，必须使用CSS3半径和阴影属性的组合。要在悬停在按钮上时获得突出显示，必须使用伪选择器：悬停。

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

Answer 2

刚刚发现您可以通过检查http://html5doctor.com/you-can-still-use-div/的来源指定阴影作为插图：

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