HTML阴影的设置

最新推荐文章于 2024-01-05 00:30:00 发布

爱睡觉的小馨

最新推荐文章于 2024-01-05 00:30:00 发布

阅读量9k

点赞数 1

分类专栏： HTML与CSS5网页设计

本文链接：https://blog.csdn.net/qq_45696288/article/details/108754065

版权

HTML与CSS5网页设计专栏收录该内容

21 篇文章 7 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

            ul{
                list-style: none;
                margin: 20px auto;
            }

            ul > li{
                width : 200px;
                height: 50px;
                border: 1px solid red;
                background: yellowgreen;
                margin: 10px;
                padding: 10px;
            }

            ul > li:nth-child(1){
                border-radius: 50%;
                /* 设置阴影，水平向左偏移10px，垂直向上偏移10px */
                /* rgba为四个参数，前三个是rgb颜色，最后一个是透明度，取值为：0~1 */
                /* 当透明度为0的时候，是完全透明，是看不到颜色的 */
                box-shadow: -10px -10px rgba(0, 0, 0, 0.6);
            }

            ul > li:nth-child(2){
                border-radius: 50px 50px 0 0;
                /* 阴影水平向右偏移10px，垂直向下偏移10px 边缘模糊半径10px */
                box-shadow: 10px 10px  10px rgba(0, 0, 0, 0.6);
            }

            ul > li:nth-child(3){
                border-radius: 50%;
                /* 阴影水平向右偏移10px，垂直向下偏移10px 边缘模糊半径10px  阴影向外扩展10px 内阴影 */
                box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.6) inset;
            } 

            ul > li:nth-child(4){
                box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.6) inset;
            }

    </style>

</head>

<body>
    
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

</body>

</html>

在这里插入图片描述

爱睡觉的小馨

关注

1
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML阴影的设置

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> ul{
复制链接

扫一扫