时间戳

首页 > 解决方案 > 边框半径过渡在 Safari 中不起作用

html - 边框半径过渡在 Safari 中不起作用

问题描述

我正在处理一个小页面，其中一个部分将包含一个图片库。原始图片是正方形，但在页面上我将边框半径设置为 50%，然后当您将鼠标悬停在图像上方时，半径变为 0%，图像也​​缩放为 1.4。

这很好用，但是当您悬停时，我还想在图像前面添加一个带有文本的 div。该文本将包含一些信息，并且会有点透明，因此您可以看到其背后的图像。下面的代码在 IE、Chrome 和 FF 中运行良好，但 Safari 只是不想合作。当图像的 scale 属性起作用时，border-radius 不会起作用，反之亦然。

HTML

<div class="bild">
        <img src="img/Soffa2.png">
          <div class="bild_text">
            <div class="bild_textrad">
              <h2>SoffaDirekt</h2>
              <p>Concept</p>
              <a href="#">Read more!</a>
            </div>
          </div>
        </div>

CSS

.bild {
  text-align: center;
  overflow: hidden;
  position: relative;
  height: 95%;
  width: 95%;
  border-radius: 50%;
  transition-property: border-radius;
  transition-duration: .8s;
}

.bild:hover{
  border-radius: 0%;
}

.bild > img {
  max-width: 102%;
  max-height: 102%;
  transition-property: transform;
  transition-duration: .8s;
}

.bild:hover > img{
  transform: scale(1.3);
}

.bild_text{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  background: rgba(23 , 23, 23, 0.5);
  color: white;
  visibility: hidden;
  opacity: 0;
  transition: opacity .8s, visibility .8s;
}

.bild:hover > .bild_text{
  visibility: visible;
  opacity: 1;
}

标签： htmlcsssafaricss-transitions

解决方案

CSS 中有几个属性需要在它们之前应用前缀 -webkit- 就像

.bild {
  text-align: center;
  overflow: hidden;
  position: relative;
  height: 95%;
  width: 95%;
  border-radius: 50%;
  -webkit-transition-property: border-radius; /* Safari */
          transition-property: border-radius;
  -webkit-transition-duration: 0.8s;  /* Safari */
          transition-duration: 0.8s;
}

version 3.1 to 6.1Safari 支持和transition-property前缀。transition-duration-webkit-

推荐阅读