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

enter image description here

我所创建的容器和圆角。小提琴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; 
}

来源

2013-02-13 Isuru

我不够好，用渐变来正确回答，但你可能想尝试一个大的径向渐变，使用rgba颜色来创建半透明的白色阴影，这是重新定位，使其大部分都落后白色区域。 – 2013-02-13 13:13:21

谢谢。我会试一试。我对基本的CSS没问题，但渐变对我来说也一直是个难题。 – Isuru 2013-02-13 13:36:11

和一些灵感！ HTTP：// tjrus。com/iphone :) – 2013-02-13 13:47:50

足够接近，我希望：

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%); 
}

来源

2013-02-13 13:51:46 KBN

非常感谢。这很好用！我做了一些调整，比如删除这行'border：1px solid #FFFFFF;'并调整'box-shadow'的值。现在看起来很好。再次感谢:) – Isuru 2013-02-13 15:13:05

@KBN不错的工作。 – 2014-11-27 10:36:15

玩弄这一点http://www.colorzilla.com/gradient-editor/，你也许能够想办法的。然而，背景图像会更容易。任何你不能只使用这个图像的理由？

来源

2013-02-13 13:11:35

我有几个表单控件进入白色区域。如果我使用图片，当浏览器调整大小时，图片会在控件位于同一位置时移动。这是为了水平布局。早些时候用类似的方法解决了很多麻烦。再加上这个网站已经有很多大的图片了。我试图保持图像的使用最小化，以挤出一些表现。 – Isuru 2013-02-13 13:15:19

是的，你可以使用box-shadow属性，

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

更新小提琴是在这里：

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

UPDATE：

对于您可以使用边界：

更新提琴：

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

来源

2013-02-13 13:14:11 defau1t

你实际上回答了另一个问题。 +1我想知道如何获得这个薄边框。：D但是我想要的是底部的那个微光。你知道吗？在左侧。 – Isuru 2013-02-13 13:17:41

@Isuru：看到我更新的答案和小提琴，你的意思是？ – defau1t 2013-02-13 13:22:48

不是边框。见[this]（http://i.imgur.com/YjBz1AM.jpg）图片。我希望它引人注目。它真的很难看到。在一些屏幕分辨率。 – Isuru 2013-02-13 13:27:15

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

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

enter image description here

来源

2013-02-13 13:40:53 David

非常感谢，大卫。 :)这工作得很好，但只在Chrome中。我尝试添加背景：＃222 -webkit-radial-gradient（20％80％，60％60％，rgba（255,255,255，.15），rgba（255,255,255,0））;''带有'-moz- '和'-o'，但它们在Firefox和Opera中不起作用。 – Isuru 2013-02-13 15:14:30

@Isuru FF和Opera有不同的渐变语法，您可以在这里阅读其中的一些内容（只需将Google自己添加到其他文档中）：https：//developer.mozilla.org/en-US/docs/CSS/Using_CSS_gradients – David 2013-02-13 15:17:56

谢谢，大卫。会做:) – Isuru 2013-02-13 17:03:40

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

回答

相关问题