已解决 - 解决方案如下,检查 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/