html+css实现炫酷阴影效果

最新推荐文章于 2024-04-03 13:16:07 发布

Forget December

最新推荐文章于 2024-04-03 13:16:07 发布

阅读量917

点赞数

分类专栏：前端基础文章标签： css html5

本文链接：https://blog.csdn.net/weixin_44151448/article/details/107990508

版权

前端基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        
       body{/*全局背景*/
           height: 100%;
           padding: 100px;
           background-color: #333;/*#333333的缩写*/
       }
       .eye{/*圆形区域*/
           width: 240px;
           height: 240px;
           border-radius: 50%;/*实现圆形效果*/
           background-color: #444;
           margin: 0 auto;/*让圆形区域在全局居中*/
           text-align: center;/*文本居中*/
           box-shadow: inset 36px 36px 18px #2b2b2b,/*盒子阴影(内部阴影),分左上，右下*/
                       inset -18px -18px 9px #393939;
       } 
       .eye>p{
           font-size: 164px;
           font-weight: 900;/*字体粗细*/
           color: #333;/*字体颜色(background或background-color是背景颜色)*/
           line-height: 240px;/*文本高度(line-height=圆形容器高度时，实现文字竖直居中)*/
           font-family: '微软雅黑';
           text-shadow: 6px 6px 6px #2b2b2b,/*文本阴影(外部阴影),分左上，右下*/
                        -6px -6px 6px #393939;
       }
    </style>
</head>
<body>
    <div class="eye">
        <p>J</p>
    </div>
</body>
</html>

效果图
在这里插入图片描述
更多详细实现步骤间参考链接
https://github.com/YoosonChan/learnsomething/tree/master/DAY_002?utm_source=qq

Forget December

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html+css实现炫酷阴影效果

<!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> *{ mar
复制链接

扫一扫