css 从中间展开 |css3边框九宫格水平效果

/* 首先，大家需要对要展开的内容进行一些基本的设置 */
.content {
width: 100%;
height: 0;
overflow: hidden;
transition: height 0.5s ease-out;
}
/* 当有hover事件时，大家会对这个content区块进行一些操作 */
.content:hover {
height: 200px;
transition: height 0.5s ease-in;
}
/* 为了在展开时能够充分利用空间，大家对其内部布局进行一些设置 */
.content-inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: auto;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

通过上面的CSS代码，大家成功实现了从中间展开的效果。首先，大家使用了一个叫做content的区块，将内容进行包裹，并设置其height为0，即默认状态下不可见。

然后在hover事件发生时，大家使用了transition属性，使得content从默认高度0转变为200px。这里大家对transition的具体参数进行了一些调整，看起来更加顺畅自然。注意第二个transition的ease-in效果，让展开的速度变慢了，时长也需要同步调整。

最后，大家对content的内部进行一些布局上的调整，设置一个绝对定位的container，并使用transform来使其水平垂直居中。同时大家也给container添加了一些背景、阴影等装饰效果，让展开后的内容更加美观大方。