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

Question

大家好，我在个人资料卡片上创建了一个不错的悬停效果，但我希望在内容中更多地添加悬停效果上的边框。 padding 对我没用，任何解决方法的线索。

上有它的演示代码

这就是我期待的

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

Answer 1

请试试这个css:

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

Answer 2

尝试使用box-shadow

span.hover-content span {

  box-shadow: inset 1px 1px #777, 1px 1px #777;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

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

how to get the Border from the hover effect inside the content

html

css

hover