有没有哪位大神知道慕课网的课程选项的那个边框阴影效果是如果做的啊？求指教

源自：1-1 代码初体验，制作我的第一个网页

有没有哪位大神知道慕课网的课程选项的那个边框阴影效果是如果做的啊？求指教

DIV的边框阴影，鼠标放上去就有阴影，拿走鼠标就消失的边框阴影特效，求指教

提问者：qq_最帅的二狗蛋_0 2015-12-05 14:52

个回答

ya_fee

2015-12-05 17:16:17

已采纳

html:
<div style="width: 200px;height: 200px;background-color: #999">
</div>
css:
div:hover{
box-shadow: -2px 0px 2px #ccc,2px 2px 2px #ccc;
}

0

慕課君: 2015-12-14 11:19:31

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title></title>
        <style type="text/css">
            div:hover{
		        box-shadow: -2px 0px 2px #ccc,2px 2px 2px #ccc;
	             }
        </style>
    </head>
    <body>
        <div style="width: 200px;height: 200px;background-color: #999">	
	</div>
        </form>
    </body>
</html>

qq_最帅的二狗蛋_0

2015-12-10 14:41:51

不好意思，我输入这串代码得到的是这个，鼠标移上去并没有产生那种边框会产生阴影的效果啊，请问下是我打开方式不对吗？

0