在css中,可以利用“:hover”选择器和“box-shadow”属性实现鼠标悬停时的阴影效果,语法为“元素:hover{box-shadow:水平阴影位置 垂直阴影位置;}”。
本教程操作环境windows10系统、css3&&html5版、dell g3电脑。
用css3实现鼠标悬停时的阴影效果
在css中,想如果要实现鼠标悬停时的阴影效果,可以利用“:hover”选择器和“box-shadow”属性实现。
box-shadow属性可以设置一个或多个下拉阴影的框。
示例如下
<!doctype html><html lang=en><head> <meta charset=utf-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=x-ua-compatible content=ie=edge> <title>document</title> <style> div{ width:200px; height:200px; background-color:pink; } div:hover{ box-shadow: 10px 5px 5px #888888; } </style></head><body><div></div></body></html>输出结果
(学习视频分享css视频教程)
的方法是什么