html - 如何从内容中的悬停效果获取边框

嘿，我在这里在个人资料卡上建立了一个很好的悬停效果，但是我希望在内容中更多地具有我对悬停效果的边框。 padding没有为我工作，任何提示如何修复它。

我在bootply上有它的演示代码



那就是我所期待的

.model-card {
    display: inline-block;
    position: relative;
    margin: 0em 0.7em 1.4em 0.7em;
    background-color: #fff;
    transition: box-shadow .25s;
    width: 15em;
    padding: 0px;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25);
    -webkit-transition: transform 0.3s ease-out;
    -moz-transition: transform 0.3s ease-out;
    -o-transition: transform 0.3s ease-out;
}

span.hover-content {
    background: rgba(135,211,183,0.7);
    color: white;
    border: 1px solid #fff;
    cursor: pointer;
    display: table;
    padding: 10px;
    height: 21em;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    opacity: 0;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
}

最佳答案

请尝试以下CSS：

span.hover-content span {
  border: 1px solid;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

关于html - 如何从内容中的悬停效果获取边框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36841977/