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

最新推荐文章于 2023-08-28 08:08:42 发布
最新推荐文章于 2023-08-28 08:08:42 发布
阅读量1.6k 收藏 3
点赞数
分类专栏： css css学习 文章标签： 字体 css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bwshqh/article/details/50839605
版权
一、理论：
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

二、实践：

1.

<!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>


bwshqh
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3 text shadow字体阴影效果
12-13
最近在整理学习CSS3的一些小知识，现在已经整理了CSS3选择器，CSS3圆角和CSS3元素阴影属性的使用方法了。今天为大家整理一下CSS3中的文字阴影——text-shadow的使用方法。希望能对大家有所帮助吧。 一、text-shadow...
css-逗号 text-shadow-1.1
caishu1995的博客
12-22 219
text-shadow: 0 0 0.25em blue, 0 0 0.35em blue, 0 0 0.45em blue, 0 0 0.55em blue, 0 0 0.65em blue;     text-shadow：向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度...
CSS 阴影
o_jj_o的博客
01-05 515
box-shadow: 盒子阴影 （inset 向里走了 内阴影()） X轴偏移量 Y轴偏移量 模糊半径（可以负值） 扩散半径 box-shadow:[inset] x y blur [spread] color 参数 inset：投影方式 inset：内投影 不给：外投影 ...
CSS3之文字阴影
jhkkk的博客
11-21 1918
文字阴影(CSS3) 以后我们可以给我们的文字添加阴影效果了 Shadow 影子 text-shadow:水平位置 垂直位置 模糊距离 阴影颜色; 前两项是必须写的。 后两项可以选写。 ...
CSS3的文字阴影—text-shadow
coldriversnow的专栏
08-21 2325
Color是指阴影的颜色，其可以使用rgba色。应用这两个效果大家一定要注意，其模糊值一定要设置为0，使文本不具有任何模糊效果，主要用来增加其质感，你也可以像photoshop中制作一样，改变不同的投光角度，从而制作出不同的效果，这里我就不举例子了，感兴趣的朋友可以自己尝试一下。描边效果跟我们在Photoshop相比，我承认效果差很多，出现断点，但有时还是可以试用达到一种特殊的描边效果，其主要运用两个阴影，第一个向左上投影，而第二向右下投影，还需注意，制作描边的阴影效果我们不使用模糊值。
css实现文字阴影效果
qq_63608386的博客
12-29 299
效果图：实现代码：通过文字阴影来实现。
CSS3 text-shadow实现文字阴影效果
12-13
CSS3设置文字阴影效果，对文字字体设置阴影效果，采用text-shadow样式，本来在CSS2版本中也有此属性，但在CSS3中文字阴影text-shadow再次被应用，丰富文字排版布局美化效果。 CSS3单词与语法 CSS3单词： text-shadow...
css基础学习笔记之字体图标
01-08
2.灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等 3.兼容性：几乎支持所有的浏览器，请放心使用 注意：字体图标并不能替代精灵技术，只是在工作中图标部分技术的提升和优化 总结：简单...
css3一款3D字体带阴影效果的实现步骤
09-25
3D字体而且还带有阴影，这种效果想必大家只有认为一些高级的作图工具才可以实现的吧，css3的出现让这一切看似不可能的实现成为可能，接下来为大家介绍下3D字体带阴影效果的实现步骤，感兴趣的你可不要错过了哈
CSS篇 文字阴影text-shadow
weixin_42497127的博客
11-23 455
text-shadow属性 用于文字阴影 语法格式如下 text-shadow：水平位置 垂直位置 模糊距离 阴影颜色 text-shadow：h-shadow v-shadow blur color 参数 表示的意义 是否必须 h-shadow 水平阴影的位置。允许负值。 必需 v-shadow 垂直阴影的位置。允许负值。 必需 blur 模糊距离 可选 color 阴影颜色 可选 <!DOCTYPE html> <html> <hea
css之文字阴影效果
qq_57540936的博客
10-28 480
1.文字阴影 文本阴影：
CSS实现字体镂空效果、阴影效果、字体阴影效果
m0_62956518的博客
04-25 7658
CSS实现字体镂空效果、阴影效果、字体阴影效果
CSS3文字与字体 文本阴影text-shadow
lorry的博客
01-23 241
text-shadow可以用来设置文本的阴影效果。 语法： text-shadow: X-Offset Y-Offset blur color; X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移； Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移； Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越...
css如何设置文字阴影？
热门推荐
JIAFury的博客
12-23 2万+
text-shadow属性：在CSS3中可以用text-shadow属性给页面上的文字添加阴影效果,可以通过对text-shadow属性设置相关的属性值，来实现一些需要的字体阴影效果,减少了图片的使用。 text-shadow属性的使用方法：text-shadow：X轴Y轴Rpxcolor; 属性说明（顺序依次对应）：阴影的X轴(可以使用负值)阴影的Y轴(可以使用负值)阴影模糊值（半径大小）阴影的颜色。 1）位移距离：text-shadow所使用的参数中，前两个参数是阴影离开文字的横方向和纵方向的位移
CSS中如何实现文字阴影效果（text-shadow）？
最新发布
官方推荐
08-28 1万+
CSS中如何实现文字阴影效果（text-shadow）？
css3实现文字的阴影效果
bluefish_flying的博客
02-27 2917
//代码&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;style&gt;h1{text-shadow: -2px 0px 2px  #FF0000,2px 0px 2px  #FF0000,0px 2px 2px  #FF0000,0px -2px 2px  #FF0000;}&lt;/style&gt;&lt;/head&gt;&lt;body...
CSS基础知识（颜色、文本、阴影）
xiaoxiaojinglinger的博客
07-29 557
CSS基础知识（颜色、文本、阴影） color:该属性用于控制文本颜色 font-family:设置文字的字体 font-size:用于设置文字的大小，后边可以直接为数字的大小 font-stretch属性用来将字体在水平方向上进行拉伸或压缩，让一种字体的字符更宽或更窄。如果水平压缩，则字体变窄，如果水平拉伸，则字体变宽； 字体依次由窄到宽：ultra-condensed、extra-condensed、condensed、semi-condensed、normal、semi-expanded、expand
CSS学习（十二）-文本换行符
bwshqh的博客
03-12 5046
一、理论： 1.word-wrap: a.normal 在半角空格或连字符的地方进行换行 b.break-word 不截断英文单词换行 2.word-break: a.normal 中文到边界上的汉字换行，英文从整个单词换行 b.break-all 强行截断英文单词换行 c.keep-all 不允许字断开 3.while-space: a.normal 默认值 b.pre 文本
CSS学习（六）-css圆角边框高级效果、边框阴影效果（上）
bwshqh的博客
03-04 4659
一、理论： 1.border-radius: a.表格应用圆角:表格必须使用border-collapse属性为separate，表格圆角才能正常显示 b.圆形:元素的宽度和高度相同，圆角的半径值50%(或高度的一半) c.半圆:元素的宽度与圆角方位配合一致，以不同的高度比例等项即可制作半圆 d.扇形:元素的宽度、高度、半径值相同，根据圆角位置不同可制作不同的扇形 e.椭圆:需要设置圆
css字体阴影和倾斜
08-10
在CSS中，你可以使用text-shadow属性来为字体添加阴影效果。text-shadow属性接受一组值，用逗号分隔，每个值表示一个阴影效果。每个阴影效果由三个值组成：水平偏移量、垂直偏移量和模糊半径。 下面是一个示例，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值