Question

我是使用CSS的新手，我通常只会更改背景颜色等，因为我很少创建网站。

我姐姐让我为她的大学课程建立了一个网站，但是当她通过网站发送她时，她看不到我放在右上角的彩带。

她正在使用Safari，我无法弄清楚如何对其进行排序。

功能区的CSS是

    .ribbon {
  background-color: #3b5998;
  overflow: hidden;
  white-space: nowrap;
  /* top right corner */
  position: absolute;
  right: -50px;
  top: 40px;
  /* 45 deg ccw rotation */
  -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
  /* shadow */
  -webkit-box-shadow: 0 0 10px #000;
     -moz-box-shadow: 0 0 10px #000;
          box-shadow: 0 0 10px #000;
}
.ribbon a {
  border: 1px solid #000;
  color: #fff;
  display: block;
  font: bold 81.25% 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: 1px 0;
  padding: 10px 50px;
  text-align: center;
  text-decoration: none;
  /* shadow */
  text-shadow: 0 0 5px #444;
}

ul.img-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

ul.img-list li {
  display: inline-block;
  height: 200px;
  margin: 0 1em 1em 0;
  position: relative;
  width: 200px;
}

span.text-content {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 200px;
  left: 0;
  position: absolute;
  top: 0;
  width: 200px;
  border-radius: 50%;
}

span.text-content span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

span.text-content {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 201px;
  left: 0;
  position: absolute;
  top: 0;
  width: 201px;
  opacity: 0;
}

ul.img-list li:hover span.text-content {
  opacity: 1;
}

span.text-content {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 201px;
  left: 0;
  position: absolute;
  top: 0;
  width: 201px;
  opacity: 0;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}

如果有人能指导我，我会错过那些会很棒的事情。

谢谢，亚伦

CSS功能区没有出现在safari中

0 个答案: