css揭秘笔记——字体排版

XboxYan 发布于2019-08-29 13:48 / 2679人阅读

摘要：现实中的文字效果图版印刷效果空心字效果效果可以说有点差了，所以不适合描边宽的样式。

插入换行


    Name:
    zhanglu
    Email:
    zhanglu_helloworld@126.com
    zhanglu_helloworld@126.com
    Location:
    Earth

如何让上面这一段HTML变成这个样子：

dt,dd{
    display: inline;
}
dd{
    margin: 0;
    font-weight: bold;
}
dd + dt::before{
    content: "A"; /*除了第一行的dt之外，前面都换行*/
    white-space: pre; /*防止空白符和换行符合并*/ 
}
dd + dd::before{
    content: ","; /*在除了第一个dd外的dd前加逗号*/
    margin-left: -.25em; /*去掉每个dd之间的空格，也就是逗号前的空格*/
    font-weight: normal;
}

文本行的斑马条纹

padding: 0.5em;
line-height: 1.5;
background: beige;
background-image: linear-gradient(transparent 50%, rgba(0,0,0,.2) 0);
background-origin: content-box; /*很重要，让条纹和文本行对应起来*/
background-size: auto 3em;

自定义下划线

/*元素使用行内元素*/
background: linear-gradient(gray, gray) no-repeat;
background-size: 100% 1px;
background-position: 0 1.15em;
text-shadow: .05em 0 white, -.05em 0 white;/*实现下划线不穿过字体降部的效果*/

通过这样方法，还可以画出虚线、波浪线等效果。

现实中的文字效果 图版印刷效果

  background: hsl(210,13%,60%);
  color: hsl(210, 13%, 30%);
  text-shadow: 0 1px 1px hsla(0,0%,100%,.8);

background: hsl(210,13%,30%);
color: hsl(210, 13%, 60%);
text-shadow: 0 -1px 1px black;

空心字效果

background: deeppink; 
color: white;
text-shadow: 1px 1px black, 1px -1px black, 
-1px 1px black, -1px -1px black;

text-shadow: 0 0 1px black, 0 0 1px black,  
0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;

text-shadow: 3px 3px black, 3px -3px black, 
-3px 3px black, -3px -3px black;

效果可以说有点差了，所以不适合描边宽的样式。

文字外发光效果

.glow{
    background: #203; color: #ffc; 
    transition: 1s;
}
.glow:hover{
    text-shadow: 0 0 .1em , 0 0 .3em;
}

.dizzy{
    background: #203; color: #ffc; 
    transition: 1s;
}
.dizzy:hover{
    color: transparent;
    text-shadow: 0 0 .1em white , 0 0 .3em white;
}

.dizzy{
    background: #203; color: #ffc; 
    transition: 1s;
}
.dizzy:hover{
    filter: blur(.1em);
}

background: steelblue; 
color: white;
text-shadow: 0 1px hsl(0, 0%, 85%), 0 2px hsl(0, 0%, 80%), 
0 3px hsl(0, 0%, 75%), 0 4px hsl(0, 0%, 70%), 
0 5px hsl(0, 0%, 65%), 0 5px 10px black;

background: hsl(0, 50%, 45%);
color: white;
text-shadow: 1px 1px black, 2px 2px black,  
3px 3px black, 4px 4px black, 
5px 5px black, 6px 6px black, 
7px 7px black, 8px 8px black;

云服务器 GPU云服务器中文排版CSS心得 css字体库 css 服务器字体 css3服务器端字体

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112714.html

css编码技巧【css揭秘读书笔记】

摘要：最近在看揭秘，于是写了文章来作笔记，除此以外还会补充一些自己遇到的笔试题。举例说明以上的代码有什么问题呢如果需要改变字号，那么同时需要调整行高。那么经过修改后的代码如下关于使用还是还是百分比，需要根据具体情况来决定。最近在看《css揭秘》，于是写了文章来作笔记，除此以外还会补充一些自己遇到的笔试题。希望大家都有所收获。 css编码技巧尽量减少代码重复在实践中，代码可维护性的最大要...

Miyang 2019-08-30 12:59 评论0 收藏0
css揭秘笔记——形状

摘要：把改成，就变成了这样实现边框内圆角多重边框还有下实现多重背景为某一层背景单独设置类似这样的属性等等。裁切路径方案这种方案，当内边距不够宽时，会裁切掉文本。自适应的椭圆（border-radius的用法）单独指定水平和垂直半径长宽固定的元素，可以通过指定宽高的一半，变为椭圆形，格式为两个值用/分开。 width: 100px; height: 80px; border-radi...

dantezhao 2019-08-29 13:47 评论0 收藏0
重学前端学习笔记（十四）--浏览器工作解析（四）

摘要：浏览器最基本的排版方案是正常流排版。元素非常特别，浏览器对的处理是先排入正常流，再移动到排版宽度的最左最右主轴的最前和最后。浏览器支持的每一种排版方式，都是按照对应的标准来实现的。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习...

masturbator 2019-08-02 16:17 评论0 收藏0
重学前端学习笔记（十四）--浏览器工作解析（四）

摘要：浏览器最基本的排版方案是正常流排版。元素非常特别，浏览器对的处理是先排入正常流，再移动到排版宽度的最左最右主轴的最前和最后。浏览器支持的每一种排版方式，都是按照对应的标准来实现的。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习...

马忠志 2019-08-26 13:46 评论0 收藏0
重学前端学习笔记（十四）--浏览器工作解析（四）

摘要：浏览器最基本的排版方案是正常流排版。元素非常特别，浏览器对的处理是先排入正常流，再移动到排版宽度的最左最右主轴的最前和最后。浏览器支持的每一种排版方式，都是按照对应的标准来实现的。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习...

dingda 2019-08-30 10:52 评论0 收藏0