                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

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

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

qq_最帅的二狗蛋_0

2015-12-05

源自：初识HTML(5)+CSS(3)-升级版 1-1

关注问题我要回答

982

操作

收起

2 回答

ya_fee 回答被采纳 +3 积分
2015-12-05

html:

</div>

css:

div:hover{

box-shadow: -2px 0px 2px #ccc,2px 2px 2px #ccc;

}

0 回复有任何疑惑可以回复我~

收起回答

qq_最帅的二狗蛋_0 提问者

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

2015-12-10 回复有任何疑惑可以回复我~

qq_最帅的二狗蛋_0 提问者

非常感谢！

2015-12-13 回复有任何疑惑可以回复我~

慕課君
2015-12-14

<!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>

0 回复有任何疑惑可以回复我~

收起回答

qq_最帅的二狗蛋_0 提问者

哥们儿，太厉害了！谢谢你！

2015-12-16 回复有任何疑惑可以回复我~