css 表阴影外面不显示

标签 css

已解决 - 解决方案如下,检查 fiddle 页面如何以正确的方式执行此操作。

.

我的问题出在下面的代码上,我想实现 2 个阴影:1 个在外面,1 个在里面。现在代码以某种方式使外部阴影消失。

在下面,我删除了关于我现在如何拥有它的代码。我可能做错了什么,只是我不知道在哪里。

代码:

<style type="text/css">
body {
    background-image: url(grassbkg.png);
    background-color:#000;
}
.tablecorner {
    border-radius: 25px;
    padding-top: 8px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 8px;    
    border: 2px solid #FFFFFF;
    background-color: rgba(11, 66, 121, 0.7);
    width: 200px;
    height: 150px;
}
.tablecorner, outsideshadow {
    -moz-box-shadow: 0 0 15px 8px #000;
    -webkit-box-shadow: 0 0 15px 8px#000;
    box-shadow: 0 0 15px 8px #000;
}
.tablecorner, shadowinside {
    -webkit-box-shadow:inset 1px 1px 15px 5px rgba(0,0,0,0.75);
    -moz-box-shadow:inset 1px 1px 15px 5px rgba(0,0,0,0.75);
    box-shadow:inset 1px 1px 15px 5px rgba(0,0,0,0.75);
}
.tablecorner tr td {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    color: #FFFFFF;
    text-shadow: 0px 2px #000000;
}
</style>
</head>
<body>
<table align="center" class="tablecorner">
  <tr>
    <td align="left" valign="top">Dit is gewoon even een test om te zien dat alles gewoon naar behoren werkt, werkt het dan niet dan moeten we wat anders doen......</td>
  </tr>
</table>

</body>
</html>

我该如何解决这个问题?

这里我还有 fiddle 中的代码: MyCodeInFiddle

最佳答案

如果你想添加多个框阴影,你需要在 1 个样式规则中添加,逗号分隔。否则第二条规则覆盖第一条

.tablecorner {
    -moz-box-shadow: 0 0 15px 8px #000, inset 1px 1px 15px 5px rgba(0,0,0,0.75);
    -webkit-box-shadow: 0 0 15px 8px#000, inset 1px 1px 15px 5px rgba(0,0,0,0.75);
    box-shadow: 0 0 15px 8px #000, inset 1px 1px 15px 5px rgba(0,0,0,0.75);
}

关于css 表阴影外面不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30493661/

相关文章:

html - 如何在 html/css 中创建具有分离叶子的水平树

html - Html NewsLetter 中图像的绝对定位

css - 如何隐藏部分图像?

css - 我如何在带作用域的 CSS 的影子 DOM 中使用 Tippy?

html - 使按钮重叠div

javascript - 如何创建像指标一样的循环进度(饼图)

jquery - Bootstrap 模态按钮单击 jquery

HTML CSS 图像库不能用自动或拉伸(stretch)制作正方形

html - Internet Explorer 9 神奇地扩展 div

javascript - 答案折叠在常见问题页面上的问题下