CSS3-阴影

最新推荐文章于 2024-04-18 00:45:00 发布

net_chengsheng

最新推荐文章于 2024-04-18 00:45:00 发布

阅读量718

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/qq_29548433/article/details/74932102

版权

css3 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1. 文本阴影

text-shadow 可分别设置偏移量、模糊度、颜色(可设透明度)。

① 水平偏移量正值向右负值向左

② 垂直偏移量正值向下负值向上

③ 模糊度不能为负值

④ 阴影的颜色

示例代码1

<!DOCTYPE html>
<html>
<head>
    <title>设置文本阴影-单个阴影</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        /*② 给奇数个列表项设置阴影*/
        ul>li:nth-child(odd) {
            /*水平方向向右移动2像素，向下移动两像素，模糊度1像素，阴影颜色为红色*/
            text-shadow: 2px 2px 1px red;
        }
    </style>
</head>
<body>

    <!--① 创建一个无序列表-->
    <ul>
        <li>第1个列表项</li>
        <li>第2个列表项</li>
        <li>第3个列表项</li>
        <li>第4个列表项</li>
        <li>第5个列表项</li>
        <li>第6个列表项</li>
        <li>第7个列表项</li>
        <li>第8个列表项</li>
    </ul>

</body>
</html>

运行结果

这里写图片描述

示例代码2

<!DOCTYPE html>
<html>
<head>
    <title>设置文本阴影-多个阴影</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        /*② 给奇数个列表项设置阴影*/
        ul>li:nth-child(odd) {
            /*设置两个阴影 多个阴影之间用逗号分隔*/
            text-shadow: 2px 2px 1px red, 10px 2px 1px blue;
        }
    </style>
</head>
<body>

    <!--① 创建一个无序列表-->
    <ul>
        <li>第1个列表项</li>
        <li>第2个列表项</li>
        <li>第3个列表项</li>
        <li>第4个列表项</li>
        <li>第5个列表项</li>
        <li>第6个列表项</li>
        <li>第7个列表项</li>
        <li>第8个列表项</li>
    </ul>

</body>
</html>

运行结果

这里写图片描述

2. 边框阴影

box-shadow 可设置水平偏移量垂直偏移量模糊度阴影颜色

用法与test-shadow相同

示例代码

<!DOCTYPE html>
<html>
<head>
    <title>设置文本阴影-多个阴影</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        /*② 给盒子设置边框阴影*/
        div {
            width: 300px;
            height: 300px;
            background-color: black;
            box-shadow: 10px 10px 1px red, 40px 40px 1px blue;
        }
    </style>
</head>
<body>

    <!--① 创建一个div盒子-->
    <div></div>

</body>
</html>

运行结果

这里写图片描述

net_chengsheng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3-阴影

1. 文本阴影 text-shadow 可分别设置偏移量、模糊度、颜色(可设透明度)。 ① 水平偏移量正值向右负值向左 ② 垂直偏移量正值向下负值向上 ③ 模糊度不能为负值 ④ 阴影的颜色示例代码1<!DOCTYPE html><html><head> <title>设置文本阴影-单个阴影</title> <meta
复制链接

扫一扫