Firefox-CSS:伪元素“之前"的边界半径问题. [英] Firefox-CSS: border-radius issue for pseudo-element "before"
问题描述
我有一个正面和背面的卡片元素(bootstrap-4),在背面上显示了悬停.为了创建折角效果",我在前面的卡上使用了伪元素(:before),该元素对除firefox以外的所有浏览器都适用.
I have a card-element (bootstrap-4) with a front and back, on hover the back side is shown. In order to create a "folded corner effect" I am using a pseudo-element(:before) on the front card, which works fine for all browsers except of firefox.
伪元素的左下角也应该被弄圆,所以我设置了一个边界半径.不幸的是,在Firefox中,角不是圆角的,而是在伪元素中显示了一个奇怪的框.
The bottom-left corner of the pseudo-element should also be rounded, so I set a border-radius. Unfortunately in Firefox the corner is not rounded, instead there is a strange box shown in the pseudo-element.
有什么想法在Firefox中导致此问题吗?我已经尝试过定位,z-index,溢出等问题,但是找不到根本原因.
Any ideas what is causing this issue in Firefox? I already played around with positioning, z-index, overflow etc. but I cannot find the root cause.
非常感谢!
https://jsfiddle.net/rbv5ob20/
HTML:
.card {
color: white;
border: transparent;
border-radius: 10px;
-webkit-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
}
.front,
.back {
width: 100%;
height: 150px;
background: #99d0e9;
opacity: 1;
backface-visibility: hidden;
overflow: hidden;
border-radius: 10px 0px 10px 10px;
}
.front {
position: absolute;
left: 0;
z-index: 1;
opacity: 1;
text-align: left;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.front::before {
content: "";
position: absolute;
top: 0px;
right: 0px;
border-width: 0px 25px 25px 0px;
border-style: solid;
border-color: transparent #f6f6f6 #32a2d4 transparent;
border-bottom-left-radius: 10px;
}
.back {
background: #32a2d4;
opacity: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
text-align: right;
border-top-right-radius: 10px;
display: block;
}
.card:hover .back {
-webkit-transform: rotateY(0);
-ms-transform: rotateY(0);
transform: rotateY(0);
}
.card:hover .front {
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
<section id="offering" style="background-color:#f6f6f6;">
<div class="container">
<div class="col-4 text-center">
<div class="card">
<div class="front">
this is front...
</div>
<div class="back">
this is back
</div>
</div>
</div>
</div>
</section>
推荐答案
在Firefox中, border-radius
似乎未正确应用于具有 width
的元素,并且 height
设置为0.一种可能的解决方法是使用自己的 overflow:hidden
和 border-radius
制作包装器:
In Firefox border-radius
doesn't seem to get properly applied to elements with a width
and height
of 0. A possible workaround to this would be to make a wrapper with overflow: hidden
and a border-radius
on its own:
.roundArrow {
border-radius: 0 0 0 10px;
width: 50px;
height: 50px;
overflow: hidden;
}
.roundArrow:after {
content: "";
display: block;
top: 0px;
right: 0px;
border-width: 0px 50px 50px 0px;
border-style: solid;
border-color: transparent #f6f6f6 #32a2d4 transparent;
}
<div class="roundArrow"></div>
这篇关于Firefox-CSS:伪元素“之前"的边界半径问题.的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!