div内的阴影答案

【问题标题】：Shadow inside of a divdiv内的阴影
【发布时间】：2012-03-28 18:14:38
【问题描述】：

是否可以在不使用图片的情况下在 div 框中显示阴影？相反，我想使用 css 命令。

那么有没有类似的命令：-webkit-box-shadow: 1px inset;？

【问题讨论】：

他们实际上在 tumblr 网站上使用了图片，准确地说是两张图片。一个阴影图像用于整个页面宽度，第二个更宽的阴影图像位于页面中心。

标签： css shadow

【解决方案1】：

在 CSS3 中，box-shadow 也可以插入以完全满足您的需要。以下浏览器支持此功能：

Chrome >= 10.0（>= 4.0 带有-webkit 前缀）
Firefox >= 4.0（>= 3.5，带有-moz 前缀）
IE >= 9.0
歌剧 >= 10.5
Safari >= 5.1（>= 5.0 带有 -webkit 前缀）

【讨论】：

-webkit-box-shadow: 插图 0 2em 3em -1em 绿色；解决了。谢谢:)
不客气。请记住通过单击左侧的勾号来接受解决您问题的答案。

【解决方案2】：

是的，有一个命令inset。像这样：

-webkit-box-shadow: 0 0 1px 3px #000 inset;
-moz-box-shadow: 0 0 1px 3px #000 inset;
box-shadow: 0 0 1px 3px #000 inset;

你可以从这里生成http://css3generator.com/

【讨论】：

StackOverflow 代码高亮似乎认为inset 是评论#000 inset 的一部分.....

【解决方案3】：

您可以将 Box shadow generator 用于阴影效果。我将举一个例子来展示如何使用盒子阴影生成器。

第一步：转到：Box Shadow Generator

第 2 步：调整要添加的阴影属性。

第 3 步：然后使用“复制文本”按钮复制 css 代码。

第 4 步：然后您可以将 css 代码粘贴到样式表文件中。

这样做。

<html>
<head>
    <title>Title</title>
    <style type="text/css">
    #banner{

        position: absolute;
        width: 100%;
        height: 150px;
        background-color: #4E6C88;
        -webkit-box-shadow: -1px 9px 18px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: -1px 9px 18px 0px rgba(0,0,0,0.75);
        box-shadow: -1px 9px 18px 0px rgba(0,0,0,0.75);
    }

    </style>
</head>
<body>
 <div id="banner">    

 </div>
</body>
</html>

谢谢... ;)

【讨论】：