1

我使用具有透明度的图像精灵，它适用于伪内容。我需要图像周围的彩色圆形边框。

这就是我到目前为止所拥有的：http: //codepen.io/anon/pen/bpmGaz

<div class="icon"></div>

.icon:after {
  content: "";
  display: inline-block;
  background-color: gold;
  background-image: url(http://orig00.deviantart.net/1110/f/2014/143/9/b/mega_man_hd_sprites__transparent_background__by_lunodevan-d7jgruq.png);
  background-position: -129px -40px;
  height: 100px;
  width: 100px;

}

.icon {
  margin: auto;
  margin-top: 100px;
  position: relative;
  width: 100px;
}

.icon:before {
  content: "";
  display: inline-block;
  background: gold;
  position: absolute;
  top: -50px;
  left: -50px;
  width: 200px;
  height: 200px;
  z-index: -1;
  border-radius: 100%;
}

在此处输入图像描述

但是我需要它看起来像这样：

在此处输入图像描述

我可以用额外的伪内容来做到这一点（见下文），但代码有点乱。有没有更短的方法来做到这一点？

http://codepen.io/anon/pen/VaEwQy

.icon:after {
  content: "";
  display: inline-block;
  background-color: gold;
  background-image: url(http://orig00.deviantart.net/1110/f/2014/143/9/b/mega_man_hd_sprites__transparent_background__by_lunodevan-d7jgruq.png);
  background-position: -129px -40px;
  height: 100px;
  width: 100px;

}

.icon {
  margin: auto;
  margin-top: 100px;
  position: relative;
  width: 100px;
}

.icon:before {
  content: "";
  display: inline-block;
  background: gold;
  position: absolute;
  top: -50px;
  left: -50px;
  width: 200px;
  height: 200px;
  z-index: -1;
  border-radius: 100%;
}

我尝试使用大纲属性，但遗憾的是它不能跨浏览器使用边框半径。

4

1 回答 1

1

将此代码添加到您的伪元素似乎可以解决问题：

border: 50px solid gold;
border-radius: 100%;

http://codepen.io/anon/pen/aNRzmE

于 2016-04-27T17:46:40.643 回答