首页 编程

昨天我推销本站,突然有人说我的站太丑了?太伤人心了吧

但是伟大的鲁迅先生说过:“别人骂你,你要学会从自己身上找原因。”对!没错!我应该美化我的网站!

Step.1 给div加阴影

效果图


鼠标指针移动到div上时显示阴影

实现过程


本来以为会是一段艰苦历程,会涉及到jvavscript和其他神奇的东西,结果发现,真tnn容易啊!

假设你的div类名为aaa,那么是这么实现的:

在C$$里边,把aaa的css加上一句transition-duration:0.5s;,0.5s是阴影出现的时间,随意改。

举个例子:你的aaa原先长这个样子

.aaa{
    width:100%;
    height:250%;
    lzc:handsome;
}

就改成这样子:

.aaa{
    width:100%;
    height:250%;
    lzc:handsome;
    transition-duration:0.5s;
}

然后在完成后,空一行,加上以下代码:

.aaa:hover{
    -webkit-box-shadow: #FFFFFF 0px 0px 30px;/*#FFFFFF也可以换成其他你喜欢的颜色*/
    -moz-box-shadow: #FFFFFF 0px 0px 30px;
    box-shadow: #FFFFFF 0px 0px 30px;
}

这三个方法几乎一样,只有名字不同。第一个参数是阴影颜色,第二个是横向偏移,第三个是竖向偏移,第四个是阴影大小,都是可以改的。看看你喜欢哪一种即可

注意一波:写3行看着贼像的代码是因为要适配三大浏览器核心,不然有可能会出现手机无法访问的问题

然后刷新缓存,你就会神奇地发现页面带有阴影特效啦!

注意一波:不要使用泛解析*,否则会有神奇的事情发生

ohtoobad.gif

如果你是在弄vveb调试工具,那也没关系




文章评论

    哈士奇社区 访客ChromeWindows
    2020-05-20 20:41   回复

    漂亮啦

TC