CSS11：文本阴影和超链接伪类

最新推荐文章于 2022-04-14 19:53:44 发布

是2的10次方啊

最新推荐文章于 2022-04-14 19:53:44 发布

阅读量164

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS学习

本文链接：https://blog.csdn.net/Prince140678/article/details/119855725

CSS学习专栏收录该内容

24 篇文章

订阅专栏

本文介绍了CSS中如何使用text-shadow属性为文本添加阴影效果，以及如何利用a标签的伪类选择器如:hover, :active, :visited来改变超链接在不同状态下的样式。示例代码展示了在鼠标悬浮、点击和访问过链接后的颜色和字体大小变化。同时，提供了一个简单的HTML页面结构，包含图片和价格展示，进一步说明了这些样式的实际应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

11、文本阴影和超链接伪类

3.4、阴影

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gJCPk4R2-1629627248248)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\11、文本阴影和超链接伪类.assets\image-20210822180208962.png)]$

/*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径*/
#price {
    text-shadow: #740c80 10px 10px 2px;
}

3.5、超链接伪类

正常情况下，a,a:hover

/*鼠标悬浮的状态，只需要记住:hover*/
a :hover {
    color: #ff2236;
    font-size: 50px;
}
/*鼠标按住未释放的状态*/
a:active {
    color: green;
}
a:visited {
    color: pink;
}

代码show

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*默认的颜色*/
            /*a {
                text-decoration: none;
                color: gray;
            }*/
            /*鼠标悬浮的状态，只需要记住:hover*/
            a :hover {
                color: #ff2236;
                font-size: 50px;
            }
            /*鼠标按住未释放的状态*/
            a:active {
                color: green;
            }
            a:visited {
                color: pink;
            }
            /*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径*/
            #price {
                text-shadow: #740c80 10px 10px 2px;
            }


        </style>
    </head>
    <body>
        <a href="#">
            <img src="images/offer.jpg" alt="">
        </a>
        <p>
            <a href="#">剑指Offer</a>
        </p>
        <p>
            <a href="">作者：何海涛</a>
        </p>
        <p id="price">
           ￥45
        </p>
    </body>
</html>