02-CSS基础与进阶-day4__2018-08-31-20-22-57

最新推荐文章于 2019-06-18 20:41:00 发布

weixin_34245082

最新推荐文章于 2019-06-18 20:41:00 发布

阅读量274

点赞数

原文链接：http://www.cnblogs.com/HiJackykun/p/11043281.html

版权

css
文字阴影(css3)
text-shadow: 水平位置垂直位置模糊距离阴影颜色

01凹凸文字效果.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body {
            background-color: #ccc;
        }

        p {
            color: #ccc; 
            font-size: 80px;
            font-family: "微软雅黑";
            font-weight: 700;
        }

        p:first-child {
            /* 水平位置  垂直位置  模糊距离 阴影颜色*/
            text-shadow: 1px 1px 1px #000,-1px -1px 1px #fff;
        }

        p:last-child {
            /* 水平位置  垂直位置  模糊距离 阴影颜色*/
            text-shadow: -1px -1px 1px #000,1px 1px 1px #fff;
        }

        div {
            font-size: 8em;
            text-align: center;
            text-shadow: 3px 4px 5px  rgba(0,0,0,0.5);
        }
    </style>
</head>
<body>
    <p>我是凸起文字</p>
    <p>我是凹下去文字</p>
    <div>我是带有阴影的文字</div> 
</body>
</html>

转载于:https://www.cnblogs.com/HiJackykun/p/11043281.html

优惠劵

weixin_34245082

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
02-CSS基础与进阶-day4__2018-08-31-20-22-57

css 文字阴影(css3) text-shadow: 水平位置垂直位置模糊距离阴影颜色01凹凸文字效果.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</...
复制链接

扫一扫