div鼠标悬浮加阴影

效果图:(总控计划)

div鼠标悬浮加阴影

html代码:

<div class="headItem" v-for="(i,index) in item1" :key="i.id" > </div>	

 css代码:

.headItem{
	background-color: #FFFFFF;
	width: 16rem;
	position: relative;
	display: flex;
	align-items: center
}

.headItem:hover{
	box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.1);
	border-radius: 3px;
}

利用 :hover伪元素和box-shadow属性。

上一篇:CSS复习,第二天


下一篇:openwrt 21.02 使用samba4 实现共享外接U盘