Html 带有框阴影的Css悬停未按我的要求工作

.ui状态处于活动状态{
颜色：#fff；
背景：红色；
#盒影：插图-7px 7px 9px-7px#236c4d；
宽度：50px；
高度：50px；
}
.ui状态处于活动状态：悬停{
盒影：插入15px 7px 9px-7px#fff；
盒影：插图-7px 7px 9px-7px#fff；
}
18

您可以使用伪元素

：before

或

：after

.ui状态处于活动状态{
颜色：#fff；
背景：红色；
宽度：50px；
高度：50px；
位置：相对位置；
}
.ui状态活动：悬停：之后{
内容：''；
位置：绝对位置；
顶部：3px；
右：3px；
边框：实心10px白色；
边框颜色：白色透明；
}

18

我不会使用框阴影，我会使用伪元素

有两种方法可以做到这一点

---

1.一个位置，旋转的PSEDOU元件：

span{
显示：块；
宽度：3em；
高度：3em；
线高：3em；
文本对齐：居中；
背景：#f00；
颜色：白色；
字体大小：粗体；
保证金：3em自动；
溢出：隐藏；
位置：相对位置；
}
span：：之后{
内容：''；
位置：绝对位置；
宽度：100%；
身高：100%；
背景：橙色；
前-100%；
左：100%；
变换：旋转（45度）平移（0%，0%）；
转变：转变。35秒轻松；
}
span:hover:：after{
变换：旋转（45度）平移（0%，50%）

16

试试看，：）

HTML

---

z0mBi3先生，谢谢你，兄弟

<div class="date">
   <div class="sideflip"></div>
    18
</div>

.date
{
  width:80px;
  height:80px;
  border:1px solid #000000;
  text-align:center;
  font-size:65px;
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  background:red;
  color:#ffffff;
  position:relative;
  overflow:hidden;
}

.sideflip
{
  width:50px;
  height:50px;
  font-size:1px;
  position:absolute;
  -ms-transform: rotate(-50deg);
  -webkit-transform: rotate(-50deg);
  transform: rotate(-50deg);
  margin-left:160px;
  margin-top:-130px;
  background:#ffffff;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.date:hover .sideflip
{
   margin-left:60px;
  margin-top:-30px;
}
.date:hover
{
  cursor:pointer;
}