css3鼠标划过边框阴影 |css style 内嵌

.box {
border: 1px solid #ccc;
padding: 10px;
width: 200px;
height: 100px;
box-shadow: none;
transition: box-shadow .3s ease-in-out;
}
.box:hover {
box-shadow: 0 0 5px #ccc;
}

在上述代码中，大家给一个类名为“box”的元素添加了一个1px的实线边框，padding为10px，宽为200px，高为100px。同时，大家通过box-shadow属性将元素的阴影设置为“none”，表示没有阴影。

当鼠标滑过.box的时候，通过:hover伪类，大家给元素添加了一个box-shadow属性，表示让元素在鼠标划过时出现一个阴影，阴影的大小和颜色分别为0 0 5px和#ccc。

注意上述代码中的transition属性，它是用来控制box-shadow属性在变化过程中的动画效果的。其中.transition表示大家要对元素的box-shadow属性进行过渡效果，.3s表示动画的持续时间为0.3秒，ease-in-out表示动画的缓动函数为“先慢后快再慢”。

使用CSS3给元素添加鼠标划过边框阴影效果可为页面增添一些互动性和视觉效果。在实际应用中，大家还可以对box-shadow的其他属性进行定制，来实现更加细致精美的效果。