我目前正在通过wordpress开发在线商店。一切都很好,现在我想给我的页面一个自定义边框(倒圆角),并找到它的css代码,如下所示:
的CSS:
body {
background-color: #fff;
}
.wrapper {
overflow:hidden;
width:200px;
height:200px;
}
div.inverted-corner {
box-sizing:border-box;
position: relative;
background-color: #3e2a4f;
height: 200px;
width: 200px;
border: solid grey 7px;
}
.top, .bottom {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
.top:before, .top:after, .bottom:before, .bottom:after{
content:" ";
position:absolute;
width: 40px;
height: 40px;
background-color: #fff;
border: solid grey 7px;
border-radius: 20px;
}
.top:before {
top:-35px;
left:-35px;
}
.top:after {
top: -35px;
right: -35px;
box-shadow: inset 1px 1px 1px grey;
}
.bottom:before {
bottom:-35px;
left:-35px;
}
.bottom:after {
bottom: -35px;
right: -35px;
box-shadow: inset 1px 1px 1px grey;
}
HTML:
<div class="wrapper">
<div class="inverted-corner">
<div class="top"> </div>
<h1>Hello</h1>
<div class="bottom"> </div>
</div>
</div>
我将这些类重命名为与主题的现有css类没有冲突。它的工作正常如下所示:my site。问题是现在,我不能再与网站互动,没有链接,没有悬停效果。似乎自定义css覆盖了实际站点。你有什么建议我可能做错了吗?
P.S。我编辑了header.php,这样倒角div和顶部div就在页面包装div(网站内容)的正下方,在footer.php中我编辑了顶部div和倒置在页面正上方的倒角div - 包装div关闭。
答案 0 :(得分:6)
添加:
pointer-events: none;
到.bottom-corner
CSS,所以鼠标通过。
答案 1 :(得分:3)
在custom.css
中,你有这个:
.top-corner, .bottom-corner {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
这基本上覆盖整个页面,从而禁用任何交互。
答案 2 :(得分:0)
我想建议改变以下css规则的另一个选项
<强> CSS 强>
.top-corner, .bottom-corner {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
将以上代码替换为以下代码
.top - corner, .bottom - corner {
position: absolute;
width: 100 % ;
}
此解决方案适用于所有现代浏览器和IE8及更高版本(我不确定IE的较低版本,但它也可能适用于它们)