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

来源:1-1 代码初体验,制作我的第一个网页

qq_最帅的二狗蛋_0

2015-12-05 14:52

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

写回答 关注

3回答

  • 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;

    }


    qq_最帅的...

    非常感谢!

    2015-12-13 16:12:22

    共 2 条回复 >

  • 慕課君
    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_最帅的...

    哥们儿,太厉害了!谢谢你!

    2015-12-16 17:29:14

    共 1 条回复 >

  • qq_最帅的二狗蛋_0
    2015-12-10 14:41:51

    http://img.mukewang.com/56691e5400019dc307090434.jpg不好意思,我输入这串代码得到的是这个,鼠标移上去并没有产生那种边框会产生阴影的效果啊,请问下是我打开方式不对吗?

    慕課君

    哥们,第一行div块容器是放在body标签里的。第二行是css样式,你在head标签里添加一个style样式标签,把那个css的样式放进去。或者外联,或者内部,都可以。这样吧我在下面给你写个全部的。

    2015-12-14 11:16:38

    共 1 条回复 >

初识HTML(5)+CSS(3)-升级版

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

1225812 学习 · 18234 问题

查看课程

相似问题