如何使用CSS渐变创建这样的“闪亮”效果？

Question

是否可以仅使用CSS创建以下内容？

我创建了容器和圆角。小提琴here。

但我不知道如何获得轻微的闪亮效果。是否可以在CSS中执行此操作？如果是这样的话？

以下是我到目前为止编写的代码。

HTML

<div id="phone-outer">
    <div id="phone-inner">

    </div>
</div>

CSS

#phone-outer {
    margin-bottom:200px;
    margin:0 auto;  
    width:400px;
    height:500px;
    background-color:#333;
    -webkit-border-bottom-right-radius:25px;
    -webkit-border-bottom-left-radius:25px;
    -moz-border-radius-bottomright:25px;
    -moz-border-radius-bottomleft:25px;
    border-bottom-right-radius:25px;
    border-bottom-left-radius:25px;
}

#phone-inner {
    margin:0 auto;
    background-color:#FFF;
    width:360px;
    height:460px;   
}

Answer 1

我希望足够接近：

http://jsfiddle.net/UxSdU/13/

#phone-outer {    
    border: 1px solid #FFFFFF;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;

    box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;

    height: 500px;
    width: 400px;
    margin: 0 auto;


    background-image: linear-gradient(right, #111 11%, #333 56%);
    background-image: -o-linear-gradient(right, #111 11%, #333 56%);
    background-image: -moz-linear-gradient(right, #111 11%, #333 56%);
    background-image: -webkit-linear-gradient(right, #111 11%, #333 56%);
    background-image: -ms-linear-gradient(right, #111 11%, #333 56%);
    background-image: gradient(right, #111 11%, #333 56%);
}

Answer 2

如果您正在寻找微妙的渐变发光，那么应该这样做：

background:#222 -webkit-radial-gradient(20% 80%, 60% 60%, rgba(255,255,255,.15), rgba(255,255,255,0));

这适用于webkit，您可以根据支持表应用-moz和-o等效项。

您还可以添加多个框阴影以创建黑色阴影，例如：

box-shadow:0px 2px .7px 1px #777, inset 0 -7px rgba(0,0,0,.4);

以下是演示：http://jsbin.com/opinaj/4

Answer 3

是的，您可以使用Box-Shadow属性

 box-shadow:0px 0px 0px 3px #666;

更新的小提琴在这里：

http://jsfiddle.net/UxSdU/2/

更新：

为此您可以使用border：

更新小提琴：

http://jsfiddle.net/UxSdU/6/

Answer 4

稍微调试一下这个http://www.colorzilla.com/gradient-editor/，你可能会想出一些东西。然而，背景图像会更容易。你有什么理由不能使用那张图片吗？