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

最新推荐文章于 2022-06-11 22:53:15 发布

一个优雅的搬砖人

最新推荐文章于 2022-06-11 22:53:15 发布

阅读量217

点赞数 1

分类专栏： # CSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_48306950/article/details/122873689

版权

CSS 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

文本阴影 text-shadow

text-shadow: h-shadow v-shadow blur color;

h-shadow：必需。水平阴影的位置。允许负值（x轴）
v-shadow：必需。垂直阴影的位置。允许负值（y轴）
blur：可选。模糊的距离
color：可选。阴影的颜色

/* 颜色参数的顺序可以在最前面或最后面 */
/* text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径 */
#price {
    text-shadow: #0016ff 4px 4px 3px;
}

超链接伪类

a: hover：鼠标悬停在链接上
a: active：鼠标按住未释放
a: link：未访问的链接
a: visited：已访问的链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*默认的颜色*/
        a {
            text-decoration: none;
            color: black;
        }
        /*鼠标悬浮的状态*/
        a:hover {
            color: #ff7500;
        }
        /*鼠标按住未释放的状态*/
        a:active {
            color: chartreuse;
        }
        #price {
            text-shadow: #0016ff 4px 4px 3px;
        }
    </style>
</head>
<body>
<a href="#">
    <img src="image/shu.jpg" alt="《码出高效：Java开发手册》" title="《码出高效：Java开发手册》">
</a>
<p>
    <a href="#">码出高效：Java开发手册</a>
</p>
<p>
    作者：<a href="#">杨冠宝</a> / <a href="#">高海慧</a>
</p>
<p id="price">￥99.00</p>
</body>
</html>

一个优雅的搬砖人

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS09：文本阴影和超链接伪类

文本阴影 text-shadowtext-shadow: h-shadow v-shadow blur color;h-shadow：必需。水平阴影的位置。允许负值（x轴） v-shadow：必需。垂直阴影的位置。允许负值（y轴） blur：可选。模糊的距离 color：可选。阴影的颜色/* 颜色参数的顺序可以在最前面或最后面 *//* text-shadow: 阴影颜色水平偏移垂直偏移阴影半径 */#price { text-shadow: #0016ff 4px ..
复制链接

扫一扫