Firefox-CSS:伪元素“before"的边界半径问题 [英] Firefox-CSS: border-radius issue for pseudo-element "before"

查看：22
本文介绍了Firefox-CSS:伪元素“before"的边界半径问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个正面和背面的卡片元素 (bootstrap-4)，悬停时显示背面.为了创建折叠角效果"，我在前卡上使用了一个伪元素(:before)，它适用于除 Firefox 之外的所有浏览器.

伪元素的左下角也应该是圆角的，所以我设置了一个border-radius.不幸的是，在 Firefox 中，角不是圆角，而是在伪元素中显示了一个奇怪的框.

任何想法是什么导致了 Firefox 中的这个问题?我已经尝试过定位、z-index、溢出等，但我找不到根本原因.

非常感谢！

https://jsfiddle.net/rbv5ob20/

HTML:

.card {白颜色;边框:透明；边框半径: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);}.正面，.背部 {宽度:100%；高度:150px；背景:#99d0e9；不透明度:1；背面可见性:隐藏；溢出:隐藏；边框半径:10px 0px 10px 10px；}.正面 {位置:绝对；左:0；z-索引:1；不透明度:1；文本对齐:左；显示:-webkit-inline-box；显示:-ms-inline-flexbox;显示:inline-flex；}.front::before {内容: "";位置:绝对；顶部:0px；右:0px；边框宽度:0px 25px 25px 0px；边框样式:实心；边框颜色:透明 #f6f6f6 #32a2d4 透明；边框左下角半径:10px；}.背部 {背景:#32a2d4；不透明度:1；-webkit-transform:rotateY(-180deg);-ms-transform:rotateY(-180deg);变换:旋转Y(-180度)；文本对齐:右；边框右上角半径:10px；显示:块；}.card:悬停 .back {-webkit-transform:rotateY(0);-ms-transform:rotateY(0);变换:旋转Y(0)；}.card:悬停 .front {-webkit-transform:rotateY(180deg);-ms-transform:rotateY(180deg);变换:旋转Y(180度)；}

<div class="容器"><div class="col-4 text-center"><div class="card"><div class="front">这是前面...

<div class="back">这回来了

</section>

解决方案

在 Firefox 中 border-radius 似乎没有正确应用于具有 width 的元素，并且height 为 0.一个可能的解决方法是制作一个带有 overflow: hidden 和一个 border-radius 的包装器:

.roundArrow {边界半径:0 0 0 10px；宽度:50px；高度:50px；溢出:隐藏；}.roundArrow:后{内容: "";显示:块；顶部:0px；右:0px；边框宽度:0px 50px 50px 0px；边框样式:实心；边框颜色:透明 #f6f6f6 #32a2d4 透明；}

<div class="roundArrow"></div>

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.

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.

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.

Thanks a lot in advance!!

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>

解决方案

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:伪元素“before"的边界半径问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆