CSS学习（十）-CSS字体、CSS字体阴影

最新推荐文章于 2024-08-17 23:58:49 发布

bwshqh

最新推荐文章于 2024-08-17 23:58:49 发布

阅读量1.6k

点赞数

分类专栏： css css学习文章标签：字体 css3 css

本文链接：https://blog.csdn.net/bwshqh/article/details/50839605

版权

css学习同时被 2 个专栏收录

22 篇文章 2 订阅

订阅专栏

css

21 篇文章 0 订阅

订阅专栏

一、理论：
1.css字体类型
a.font-family 字体类型
b.font-style 字体样式
c.font-weight 粗细，可设置数字
d.font-size-adjust 是否强制对文本使用同一尺寸
e.font-stretch 横向拉伸变形字体
f.foont-variant 字体大小写
2.css文本类型
a.word-spacing 词间距
b.letter-spacing 字符间距
c.vertical-align 文本垂直对齐方式
d.text-decoration 文本修饰线
e.text-indent 文本首行缩进
f.text-align 文本水平对齐方式
g.line-height 文本行高
h.text-transform 文本大小写
i.text-shadow 文本阴影大小
j.while-space 文字之间和文本之间的空白符间距
k.direction 文本流入方向
3.text-shadow 文本阴影属性
a.color 阴影颜色
b.x-offset X轴位移
c.y-offset Y轴位移
d.blur-radius 阴影模糊半径
e.IE滤镜 filter:shadow

二、实践：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .text-wrap{
            width: 600px;
            margin: 10px auto;
            padding: 10px 0;
            border: 5px solid #289356;
            position: relative;
            box-shadow: 0 0 4px rgba(0,0,37,0.80);
            clear: both;
            font-family: Arial,Serif;
            font-size: 50px;
            text-align: center;
            color: #f6f6f6;
        }
        .box1{
            text-shadow:
                0px 0px 0 rgb(188,178,188),
                1px 0px 0 rgb(173,163,153),
                2px 0px 0 rgb(156,138,126),
                3px 0px 0 rgb(173,153,123),
                4px 0px 0 rgb(126,116,136),
                5px 0px 0 rgb(111,101,131),
                6px 0px 0 rgb(195,185,175),
                7px 0px 0 rgb(179,169,159),
                8px 0px 7px rgb(0,0,0,0.35),
                8px 0px 1px rgb(0,0,0,0.5),
                0px 0px 7px rgb(0,0,0,.2);
        }
        .box2{
            text-shadow:
                0px 0px 0 rgb(188,178,188),
                1px -1px 0 rgb(173,163,153),
                2px -2px 0 rgb(156,138,126),
                3px -3px 0 rgb(173,153,123),
                4px -4px 0 rgb(126,116,136),
                5px -5px 0 rgb(111,101,131),
                6px -6px 0 rgb(195,185,175),
                7px -7px 0 rgb(179,169,159),
                8px -8px 7px rgb(0,0,0,0.35),
                8px -8px 1px rgb(0,0,0,0.5),
                0px 0px 7px rgb(0,0,0,.2);
        }
        .box3{
            text-shadow:
                0px 0px 0 rgb(188,178,188),
                0px -1px 0 rgb(173,163,153),
                0px -2px 0 rgb(156,138,126),
                0px -3px 0 rgb(173,153,123),
                0px -4px 0 rgb(126,116,136),
                0px -5px 0 rgb(111,101,131),
                0px -6px 0 rgb(195,185,175),
                0px -7px 0 rgb(179,169,159),
                0px -8px 7px rgb(0,0,0,0.35),
                0px -8px 1px rgb(0,0,0,0.5),
                0px 0px 7px rgb(0,0,0,.2);
        }
        .box4{
            text-shadow:
                0px 0px 0 rgb(188,178,188),
                -1px -1px 0 rgb(173,163,153),
                -2px -2px 0 rgb(156,138,126),
                -3px -3px 0 rgb(173,153,123),
                -4px -4px 0 rgb(126,116,136),
                -5px -5px 0 rgb(111,101,131),
                -6px -6px 0 rgb(195,185,175),
                -7px -7px 0 rgb(179,169,159),
                -8px -8px 7px rgb(0,0,0,0.35),
                -8px -8px 1px rgb(0,0,0,0.5),
                0px 0px 7px rgb(0,0,0,.2);
        }
        .box5{
            text-shadow:
                0px 0px 0 rgb(188,178,188),
                -1px 0px 0 rgb(173,163,153),
                -2px 0px 0 rgb(156,138,126),
                -3px 0px 0 rgb(173,153,123),
                -4px 0px 0 rgb(126,116,136),
                -5px 0px 0 rgb(111,101,131),
                -6px 0px 0 rgb(195,185,175),
                -7px 0px 0 rgb(179,169,159),
                -8px 0px 7px rgb(0,0,0,0.35),
                -8px 0px 1px rgb(0,0,0,0.5),
                0px 0px 7px rgb(0,0,0,.2);
        }
        .box6{
            text-shadow:
                0px 0px 0 rgb(188,178,188),
                -1px 1px  0 rgb(173,163,153),
                -2px 2px 0 rgb(156,138,126),
                -3px 3px 0 rgb(173,153,123),
                -4px 4px 0 rgb(126,116,136),
                -5px 5px 0 rgb(111,101,131),
                -6px 6px 0 rgb(195,185,175),
                -7px 7px 0 rgb(179,169,159),
                -8px 8px 7px rgb(0,0,0,0.35),
                -8px 8px 1px rgb(0,0,0,0.5),
                0px 0px 7px rgb(0,0,0,.2);
        }
        .box7{
            text-shadow:
                0px 0px 0 rgb(188,178,188),
                0px 1px 0 rgb(173,163,153),
                0px 2px 0 rgb(156,138,126),
                0px 3px 0 rgb(173,153,123),
                0px 4px 0 rgb(126,116,136),
                0px 5px 0 rgb(111,101,131),
                0px 6px 0 rgb(195,185,175),
                0px 7px 0 rgb(179,169,159),
                0px 8px 7px rgb(0,0,0,0.35),
                0px 8px 1px rgb(0,0,0,0.5),
                0px 0px 7px rgb(0,0,0,.2);
        }
        .box8{
            text-shadow:
                0px 0px 0 rgb(188,178,188),
                1px 1px 0 rgb(173,163,153),
                2px 2px 0 rgb(156,138,126),
                3px 3px 0 rgb(173,153,123),
                4px 4px 0 rgb(126,116,136),
                5px 5px 0 rgb(111,101,131),
                6px 6px 0 rgb(195,185,175),
                7px 7px 0 rgb(179,169,159),
                8px 8px 7px rgb(0,0,0,0.35),
                8px 8px 1px rgb(0,0,0,0.5),
                0px 0px 7px rgb(0,0,0,.2);
        }
        .box9{
            text-shadow:
                0px 0px 0 rgb(188,178,188),
                1px 1px 0 rgb(173,163,153),
                2px 2px 0 rgb(156,138,126),
                3px 3px 0 rgb(173,153,123),
                4px 4px 0 rgb(126,116,136),
                5px 5px 0 rgb(111,101,131),
                6px 6px 0 rgb(195,185,175),
                7px 7px 0 rgb(179,169,159),
                8px 8px 7px rgb(0,0,0,0.35),
                8px 8px 1px rgb(0,0,0,0.5),
                0px 0px 7px rgb(0,0,0,.2);
        }
    </style>
</head>
<body>
    <div class="text-wrap box1">W3cplus (0 deg)</div>
    <div class="text-wrap box2">W3cplus (45 deg)</div>
    <div class="text-wrap box3">W3cplus (90 deg)</div>
    <div class="text-wrap box4">W3cplus (135 deg)</div>
    <div class="text-wrap box5">W3cplus (180 deg)</div>
    <div class="text-wrap box6">W3cplus (225 deg)</div>
    <div class="text-wrap box7">W3cplus (270 deg)</div>
    <div class="text-wrap box8">W3cplus (315 deg)</div>
    <div class="text-wrap box9">W3cplus (360 deg)</div>
</body>
</html>