盒子阴影内部发光与插入

Question

我一直试图在悬停时使用CSS box-shadow属性（尝试插入）应用glow。到目前为止，我已经能够使用插入 - http://jsfiddle.net/bgGS6（将鼠标悬停在列表项上以查看效果）。

测试代码：

HTML：

<ul>
<li>
    home
</li>
</ul>

CSS：

ul {
    list-style:none;
}
li {
    width:50px;
    height:25px;
    background:black;
    color:white;
    font-size:1.25em;
    padding:10px;
}
li:hover {
    box-shadow: inset 0 9px 10px 0px #00abe3;
}

我试图达到这样的目标：

我想知道是否有可能增加朝向中心的光晕并将其向边缘淡出。我假设最终的解决方案是在悬停时添加一个png，但是想知道是否可以单独使用CSS来实现这一点。

更新：将径向渐变添加到顶部，它非常接近我需要的内容 - http://jsfiddle.net/bgGS6/5还将为跨浏览器兼容性添加规则。

由于过渡而闪烁，不知道如何解决这个问题。有什么建议吗？

Answer 1

您可以简单地链接阴影，因此：

box-shadow: inset 0 3px 3px 0px #fff,inset 0 9px 10px 0px #00abe3;

<强> Demo Fiddle

它的作用是添加一个与背景颜色相同的初始插入框阴影（在这种情况下只是白色），使其看起来像元素在边缘处褪色，然后应用你的高亮度框阴影 - 使用更大的像素距离定义。

Answer 2

就像说明一样，你应该像这样构建你的html：

<ul>
  <li>
     <a>Home</a>
  </li>
</ul>

以下是用于创建蓝色效果的CSS，您可以根据自己的喜好自定义它，但是您可以获得它的基本要点：

ul li a{
background-color: #759ae9;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #759ae9), color-stop(50%, #376fe0), color-stop(50%, #1a5ad9), color-stop(100%, #2463de));
background-image: -webkit-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
background-image: -moz-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
background-image: -ms-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
background-image: -o-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
background-image: linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
border-top: 1px solid #1f58cc;
border-right: 1px solid #1b4db3;
border-bottom: 1px solid #174299;
border-left: 1px solid #1b4db3;
border-radius: 4px;
-webkit-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
color: #fff;
font: bold 12px/1 "helvetica neue", helvetica, arial, sans-serif;
padding: 7px 0;
text-shadow: 0 -1px 1px #1a5ad9;
width: 150px;
}

另外请注意，请查看有关CSS3的一些教程。有很多可以帮助您更广泛地了解您必须使用的工具，以实现您的需求。一个好的起点是Codeacademy.com他们有一个非常好的CSS3教程

Answer 3

你可以添加一个:before伪元素，它有一个盒子阴影;

li {
    width:50px;
    height:25px;
    background:black;
    color:white;
    font-size:1.25em;
    padding:10px;
    position: relative;
}
li:hover {
    box-shadow: inset 0 9px 10px 0px #00abe3;
}
li:hover:before {
    position: absolute;
    width: 10px;
    height: 2px;
    background: rgba(255, 255, 255, 0.4);
    content:' ';
    left: 30px;
    top: 1px;
    box-shadow: 0 3px 7px 5px rgba(255, 255, 255, 0.4);
}

请参阅this fiddle