CSS3 阴影

标签 css dropshadow

我正在尝试创建一个带有阴影的对象。我相信你需要 CSS3 来做到这一点,到目前为止我已经有了类似的东西。

<!DOCTYPE html>
<html>
<head>
<style type="text/css"> 
div
{
width:300px;
height:100px;
background-color:yellow;

}
</style>
</head>
<body>

<div></div>

</body>
</html>

最佳答案

添加框阴影:

#thediv 
{
    width:300px;
    height:100px;
    -moz-box-shadow: 10px 10px 5px #888; /* firefox shadows*/
    -webkit-box-shadow: 10px 10px 5px #888; /* chrome / safari shadows */
    box-shadow: 10px 10px 5px #888; /* general browser support */
}​

this fiddle 上的示例但请注意,由于这是 CSS3 且 IE6/7 很旧,因此无法与它们一起使用。

关于CSS3 阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11480130/

相关文章:

javascript - 响应式导航栏不会显示

html - 固定子元素在 Firefox 浏览器中闪烁

css - 奇怪的 CSS drop-shadow bug 仅在 Chrome 中出现?

iphone 在圆圈上绘制阴影

html - 设置表格单元格内容的最大高度

javascript - jQuery自动将div滚动到底部

css - 侧边栏菜单下拉菜单从右边下来

css - 带渐变的阴影 CSS

html - 方框上的圆形框阴影

css - Internet Explorer - CSS Shadow All Around