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

【问题标题】：How to create a "shiny" effect like this using CSS gradients?如何使用 CSS 渐变创建像这样的“闪亮”效果？
【发布时间】：2013-02-13 13:08:35
【问题描述】：

是否可以仅使用 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;   
}

【问题讨论】：

我在渐变方面做得不够好，无法正确回答，但您可能想尝试较大的径向渐变，使用 rgba 颜色创建半透明的白色阴影，重新定位，以便大多数其中一个在白色区域的后面。
谢谢。我会试一试。我对基本的 CSS 没问题，但渐变对我来说也一直是个难题。
还有一些灵感！ tjrus.com/iphone :)

标签： html css gradient

【解决方案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%);
}

【讨论】：

非常感谢。这很好用！我做了一些调整，比如删除这条线 border: 1px solid #FFFFFF; 并调整 box-shadow 值。现在看起来很好。再次感谢:)

【解决方案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

【讨论】：

非常感谢，大卫。 :) 这很好用，但只在 Chrome 中。我尝试添加以-moz- 和-o 为前缀的background:#222 -webkit-radial-gradient(20% 80%, 60% 60%, rgba(255,255,255,.15), rgba(255,255,255,0)); 行，但它们在Firefox 和Opera 中不起作用。
@Isuru FF 和 Opera 有不同的渐变语法，您可以在这里阅读其中的一些内容（其余部分请自行搜索）：developer.mozilla.org/en-US/docs/CSS/Using_CSS_gradients

【解决方案3】：

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

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

更新的小提琴在这里：

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

更新：

为此，您可以使用边框：

更新小提琴：

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

【讨论】：

您实际上回答了另一个问题。 +1我也想知道如何获得那个细边框。 :D 但我想要的是底部的轻微光泽。你知道吗？到左边。
没有。不是边界。请参阅this 图像。我希望它引人注目。它真的很难看到。在某些屏幕分辨率下。
@Isuru：如果我正确解释了这个问题。答案又是 box-shadow。只需使用盒子阴影值即可。我想你可能也需要稍微调整布局......

【解决方案4】：

玩弄这个http://www.colorzilla.com/gradient-editor/，你也许能想出办法。但是背景图像会容易得多。有什么理由不能只使用该图像？

【讨论】：

我有一些表单控件位于白色区域内。如果我使用图像，当浏览器调整大小时，当控件位于一个位置时，图像会移动。这是用于水平布局。之前使用类似方法遇到了很多麻烦。另外，这个网站已经有很多大图片了。我试图将图像的使用保持在最低限度以挤出一些性能。