css - Firefox-CSS:伪元素“之前”的边界半径问题
问题描述
我有一个正面和背面的卡片元素(bootstrap-4),悬停时显示背面。为了创建“折叠角效果”,我在前卡上使用了一个伪元素(:before),它适用于除 Firefox 之外的所有浏览器。
伪元素的左下角也应该是圆角的,所以我设置了一个border-radius。不幸的是,在 Firefox 中,角不是圆的,而是在伪元素中显示了一个奇怪的框。
任何想法是什么导致了 Firefox 中的这个问题?我已经玩过定位、z-index、溢出等,但我找不到根本原因。
非常感谢提前!!
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>
解决方案
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.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-bottom-left-radius: 10px;
height: 25px;
width: 25px;
background: #32a2d4;
}
.front::after {
content: "";
position: absolute;
top: -11px;
right: -17px;
height: 28px;
width: 35px;
background: white;
transform: rotate(45deg);
}
.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);
}
</style>
</head>
<body>
<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>
</body>
</html>
以下::before
伪元素的更改可能对您有用,您还必须::after
为此解决方案添加伪元素。
.front::before {
content: "";
position: absolute;
top: 0px;
right: 0px;
border-bottom-left-radius: 10px;
height: 25px;
width: 25px;
background: #32a2d4;
}
.front::after {
content: "";
position: absolute;
top: -11px;
right: -15px;
height: 25px;
width: 35px;
background: white;
transform: rotate(40deg);
}
推荐阅读
- electron-vue - 我对电子 vue 有疑问,我需要一个解决方案
- r - r中的k-means聚类分析:只设置一个中心,让其他中心计算
- kubernetes - Kubernetes中的Helm,helm和tiller有什么区别
- c++ - 我如何分叉莱特币 0.15 来创建我自己的硬币
- python - 用于 Ctypes 的 Python 中的 Safearray
- mysql - 在 MySQL 中计算未读消息的子查询
- c++ - 有没有办法检查 2 个聚合是否相等?
- javascript - 加载页面后正确的动画方法?
- python - Pytorch Tensor 如何获取元素的索引?
- python - 运行python程序时输入抛出错误