CSS3-阴影

来源：互联网发布：淘宝补单技巧编辑：程序博客网时间：2024/05/21 09:04

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>

运行结果

这里写图片描述

阅读全文

0 0