如何制作这个渐变和阴影框

发布于 2024-12-22 01:19:33 字数 103 浏览 1 评论 0原文

如何从所附图像创建此渐变和阴影框?

谢谢

在此处输入图像描述

How can I create this gradient and shadow box from the attached image?

Thanks

enter image description here

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

烧了回忆取暖 2024-12-29 01:19:33

我不确定这是否是您需要的,但基本上它创建了一个带有渐变和阴影的盒子。

.box
{
    background: #EEEEEE; /* for non-css3 browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FEFEFE', endColorstr='#EEEEEE'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#FEFEFE), to(#EEEEEE)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #FEFEFE,  #EEEEEE); /* for firefox 3.6+ */  
    -moz-box-shadow: 2px 2px 2px #BEBEBE; /* Firefox */
    -webkit-box-shadow: 2px 2px 2px #BEBEBE; /* Safari, Chrome */
    box-shadow: 2px 2px 2px #BEBEBE; /* CSS3 */
}

I'm not sure this is what you need or not, but basically it create a box with gradien and shadow.

.box
{
    background: #EEEEEE; /* for non-css3 browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FEFEFE', endColorstr='#EEEEEE'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#FEFEFE), to(#EEEEEE)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #FEFEFE,  #EEEEEE); /* for firefox 3.6+ */  
    -moz-box-shadow: 2px 2px 2px #BEBEBE; /* Firefox */
    -webkit-box-shadow: 2px 2px 2px #BEBEBE; /* Safari, Chrome */
    box-shadow: 2px 2px 2px #BEBEBE; /* CSS3 */
}
说好的呢 2024-12-29 01:19:33

试试这个js小提琴:http://jsfiddle.net/w6nLA/3/

try this js fiddle :http://jsfiddle.net/w6nLA/3/

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文