<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <p></p> 讯享网
在css中的伪类选择器，主要功能是我们用鼠标悬停在我们设置好的页面元素上时，用以触发我们设置的某一元素的属性效果。它不会改变原有的代码功能，但可以加强我们使用者的交互性。
对一个超链接，如果我们鼠标悬停碰到它（移动鼠标碰到它），然后它出现了某种变化，如变大、变颜色等；或一个按钮，我们也用鼠标悬停碰到它的位置，原本方形变圆；又或者一张卡片，当鼠标悬停到它的位置时，它产生了阴影效果。网页有以上功能，这是不是可变得很有趣而丰富了呢？
这里我们举了3个例子，使用“:hover”伪类选择器，分别对链接、图片、卡片设置几个属性，达到动画演示的目的。
这里简单设置了一个超链接，因为仅用于演示，a标签里面的href属性便选择了“#”不跳转，如果有需要可以填写某个超链接，如某个网站的地址，我们点击它便会跳转到那个网站了。这里鼠标未悬停到链接上时，是黄背景蓝文字，当我们鼠标悬停到它时，它变慢慢变为蓝背景白文字。
讯享网
- 视频效果如下：
- 鼠标未悬停在链接上时，截图效果如下：
讯享网 - 鼠标悬停在链接上时，截图效果如下：
这里我们先创建并显示一个图片，当鼠标悬停到它时，它则会变大。当然为了学习需要，我们同时添加了其他功能，如边框、圆角也会发生一些变化。
- 视频效果如下：
- 鼠标未悬停在图片上时，截图效果如下：
- 鼠标悬停在图片上时，截图效果如下：
这里我们主要是想演示卡片的阴影效果，当然为了美观，我们插入了张图片和设置了个标题。我们主要目的还是是想演示卡片的阴影效果，也就是图片外的那个方框的内容。另外简单补充阴影的内容，默认有5个参数，为便于理解，我们举例设置如下，
- A ------ 水平方向阴影，正数向右，负数向左。
- B ------ 垂直方向阴影，正数向下，负数向上。
- C ------ 阴影的模糊半径，值越大，阴影越模糊。
- D ------ 阴影的扩展半径，正值会使阴影扩大和更宽。
- rgba ------ 红色(red)、绿色(green)、蓝色(blue)、透明度(alpha)，相关的参数。
补充： C和D的参数是可以选择性设置的，但其他的参数必须要设置，参数虽然有正有负，也别忘了还有个0也是可以设置的。
讯享网
- 视频效果如下：
- 鼠标未悬停到卡片上，截图效果如下：
- 鼠标悬停到卡片上，截图效果如下：
用于衔接前面编写的和的文章。本文关于阴影box-shadow效果的，只是简单描写，笔者认为对此学习需要还不够，需要再深入学习一下，最好再举个例子来学习效果好一些。那么关于阴影的，笔者会看情况再起一篇博文。笔者认为对于某一部分的内容，就主要先对此部分学好便可，次要部分只要不影响整体我们先了解，先把主要部分弄完，如此效率会高些。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/163609.html