小编use*_*448的帖子

如何在悬停时使内部阴影透明

我想制作悬停时出现的黑色环是透明的.但是当我改变box-shadow: 0 0 0 5px #000, 0 0 0 10px green到 box-shadow: 0 0 0 5px transparent, 0 0 0 10px green它没有出现.我该如何实现呢？

html { 
  background-image: url('https://cdn-images-1.medium.com/max/800/1*aoR-yl7jicuEvQ5hZoQvjw.png');
  background-size: 100%;
}
div{
  position: relative;
  width: 150px;
  height: 150px;
  background: #ccc;
  border-radius: 50%;
  transition: 0.3s;
  border: 5px solid #fff;
}
div:hover{
  box-shadow: 0 0 0 5px #000, 0 0 0 10px green;
}

Run Code Online (Sandbox Code Playgroud)

<div></div>

Run Code Online (Sandbox Code Playgroud)

html javascript css

use*_*448

2016 07-13

8
推荐指数

1
解决办法

123
查看次数

如何反转使用CSS创建的五边形？

我想创造一个指向下方(反向)的五边形.但我不知道怎么提点.

#pentagon {
 margin:70px 0 5px 20px;
 position: relative;
 width: 110px;
 border-width: 100px 36px 0;
 border-style: solid;
 border-color: #abefcd transparent;
}
#pentagon:before {
 content: "";
 position: absolute;
 height: 0;
 width: 0;
 top: -170px;
 left: -36px;
 border-width: 0 90px 70px;
 border-style: solid;
 border-color: transparent transparent #abefcd;
}

Run Code Online (Sandbox Code Playgroud)