邊界半徑過渡在 Safari 中不起作用

Question

我正在處理一個小頁面，其中一個部分將包含一個圖片庫。 原始圖片是正方形，但在頁面上我將邊框半徑設置為 50%，然后當您在圖像上方 hover 時，半徑變為 0%，圖像也縮放到 1.4。

這很好用，但是當你 hover 時，我還想在圖像前面添加一個帶有文本的 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;
}

Answer 1

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;
}

safari version 3.1 to 6.1支持帶有-webkit-前綴的transition-property和transition-duration 。