html - 没有额外标记的斜 Angular 突出显示

Question

你看到顶部的薄斜面高光了吗？你如何在只有一个 HTML 标签的 CSS 中做到这一点？我猜它与 outline 有关。这是我到目前为止没有斜 Angular 的情况:

<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

要创建斜 Angular ，您必须组合使用 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