1. 给文字添加阴影---text-shadow

语法：

text-shadow: X-Offset Y-Offset blur color;

　　

X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；

Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；

Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；

Color：是指阴影的颜色，其可以使用rgba色。

代码示例：

<html>

<head>

    <meta charset="utf-8">

    <title>text-shadow</title>

    <style type="text/css">

        .demo {

            width: 400px;

            padding: 100px;

            font: bold 55px/100% "微软雅黑";

            background: skyblue;

            text-shadow: 3px 3px 0 blue; }

    </style>

</head>

<body>

<div class="demo">文字阴影</div>

</body>

</html>

　效果：

改变模糊半径：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>text-shadow</title>

    <style type="text/css">

        .demo {

            width: 400px;

            padding: 100px;

            font: bold 55px/% "微软雅黑";

            background: skyblue;

            text-shadow: 3px 3px 20px blue; }

    </style>

</head>

<body>

<div class="demo">文字阴影</div>

</body>

</html>

代码效果：

辉光效果示例：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>text-shadow</title>

    <style type="text/css">

        .demo {

            background: #;

            width: 224px;

            padding: 30px;

            font: bold 55px/% "Lucida Sans";

            color: #fff;

            text-transform: uppercase;

            text-shadow:  5px #fff,

              5px #fff,

              10px #fff,

              15px #fff,

              40px #ff00de,

              70px #ff00de;

        }

    </style>

</head>

<body>

<div class="demo">文字阴影</div>

</body>

</html>

效果：

2.text-overflow ： clip | ellipsis

取值：

clip：
不显示省略标记（...），而是简单的裁切。
ellipsis：
当对象内文本溢出时显示省略标记（...）

3.word-wrap也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。

语法：

word-wrap:nornal(表示控制连续文本换行）

break-word(表示内容将在边界内换行）

normal为浏览器默认值，break-word设置在长单词或 URL地址内部进行换行，此属性不常用，用浏览器默认值即可。

4.嵌入字体@font-face

@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中

@font-face的语法规则：

@font-face {

    font-family: <YourWebFontName>;

    src: <source> [<format>][,<source> [<format>]]*;  /* url自定义的字体的存放路径*/

    [font-weight: <weight>];

    [font-style: <style>];

}

  1. YourWebFontName:此值指的就是你自定义的字体名称

  2. source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；

  3. format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等；

  4. weight和style:weight定义字体是否为粗体，style主要定义字体样式，如斜体。

css3-文字与字体的更多相关文章

  1. 3.css3文字与字体

    1.css3文字与字体: ①Font-size:大小. ⑴通常使用px.百分比.em来设置大小: ⑵xx-small.x-small.small.medium.large.x-large.xx-lar ...

  2. css3文字与字体样式

    css3使用服务器端字体: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  3. CSS3 文字与字体相关样式

    给文字添加阴影 文字换行 客户端文字 font-size-adjust属性 给文字添加阴影-text-shadow属性 text-shadow:length length length color 前 ...

  4. css3文字与字体的相关样式

    给文字添加阴影——text-shadow属性 text-shadow属性是css2中定义的,在css2.1中删除了,在css3中恢复text-shadow:length length length c ...

  5. css3文字与字体

    ---恢复内容开始--- 1.text-overflow(用来设置是否使用省略标记)必须和white-space:nowrap 同时使用white-space:nowrap(强制文本在一行显示) wo ...

  6. CSS3文字与字体 text-overflow 与 word-wrap

    text-overflow 对象内的文本溢出部分采用省略“...”标记 或者 剪切: text-overflow:elip(超出容器边界的内容剪切掉)  | ellipsis(超出容器边界内容省略标示 ...

  7. CSS3基础(2)—— 文字与字体相关样式、盒子类型、背景与边框相关样式、变形处理、动画功能

    一. CSS3 文字与字体相关样式 1. 给文字添加阴影 text-shadow: length length length ccolor; 属性适用于文本阴影,指定了水平阴影,垂直阴影,模糊的距离, ...

  8. CSS3文字描边 CSS3字体外部描边

    给需要实现文字描边的元素添加如下CSS3的属性 text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; -webkit-t ...

  9. html5--6-16 CSS3中的文字与字体

    html5--6-16 CSS3中的文字与字体 中文字体包很大,少量字体的话可以有其它方法. 有字库-首页-全球第一中文web font(在线字体)服务平台.web font.webfont.在线字体 ...

  10. html5--6-23 CSS3中的文字与字体

    html5--6-23 CSS3中的文字与字体 text-overflow 设置是否使用一个省略标记(...)标示对象内文本的溢出 clip: 默认值当对象内文本溢出时不显示省略标记(...),而是将 ...

随机推荐

  1. lnmp源码搭建

      Nginx工作原理 这里需要结合Apache的工作,对PHP文件处理过程的区别 1:Nginx是通过php-fpm这个服务来处理php文件        2:Apache是通过libphp5.so ...

  2. 【漏洞学习】slowHTTPtest 慢速 DOS 攻击方法 修复方案

    日期:2018-05-28 21:41:59 更新:2019-07-05 23:15:21 作者:Bay0net 介绍:学习一下 slowHTTPtest 的攻击及防御. 0x01. 安装 下载链接 ...

  3. 算法初级（scala）

    来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/two-sum 1.给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为 ...

  4. 【MM系列】SAP 财务帐与后勤不一致情况

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP 财务帐与后勤不一致情况   ...

  5. 磁盘管理|df、du|分区 fdisk |格式化

    3.磁盘管理 3.1命令df ·用于查看已挂载磁盘的总容量,使用容量,剩余容量等. -i:查看inodes的使用情况 -h:使用合适的单位显示 -k:以KB为单位显示 -m:以MB为单位显示 3.1. ...

  6. centos7里创建用户和组

    1.创建组distro,其GID为2019groupadd -g 2019 distro 2.创建用户mandriva, 其ID号为1005:基本组为distro useradd mandriva - ...

  7. [转帖]kafka基础知识点总结

    kafka基础知识点总结 https://blog.csdn.net/qq_25445087/article/details/80270790 需要学习. 1.kafka简介 kafka是由Apach ...

  8. 【转】mysqldump原理探究

    作者:胡儿胡儿 来源:CSDN 原文:https://blog.csdn.net/cug_jiang126com/article/details/49824471 —————————————————— ...

  9. Tomcat 一台机器运行多个Tomcat

    转 https://www.cnblogs.com/andy1234/p/8866588.html 在一台Win10 PC 上面同时开启两个Tomcat系统为例. 1. 硬件环境 2. 到Tomcat ...

  10. P2562kitty猫基因

    这道题是安徽NOI省选题,但是难度并没有那么难. 这道题是一个字符串的递归题,有很多大佬用线段树来写的(我也想学线段树,lowbit当头一棒).题意为全部相同则输出B或A,不同则分成长度相同的两个子串 ...