目录

一、插入换行

  • ~：表示同辈元素之后指定类型的元素，如;elm1 ~ elm2表示,elm1之后的所有elm2元素，且elm1与elm2都是在同一个父级元素。
  • +：表示同辈元素的兄弟元素。
  • \A：一个空白换行符
  • 解决方案：
    • 在dd与dt相邻的dt上的子元素前面加入一个空白换行符
    • 在相邻的dd与dd之间，加入一个逗号
  • 示例代码：
<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        dt, dd{

            display: inline;

        }

        dd{

            font-weight: bold;

            margin: 0px 0px 0px 5px;

        }

        dd + dt::before{

            content: '\A';

            white-space: pre; /*html默认换行符与其相邻的其他空白符合并,pre表示不合并空白符*/

        }

        dd + dd::before{

            content: ',';

            margin-left: -5px;

        }

    </style>

</head>

<body>

    <dt>Name</dt><dd>Sam Long</dd>

    <dt>Email</dt><dd>abc@163.com</dd><dd>bcd@163.com</dd>

    <dt>Location</dt><dd>CQ</dd>

</body>

二、文本行的斑马条纹

  • 背景尺寸是行高的2倍
  • 注意em单位
  • white-space：设置或检索对象内空格的处理方式
    • normal：默认处理方式
    • pre：用等宽字体显示预格式化的文本，空白字符会被浏览器保留
    • nowrap：文本不会换行，直到遇到<br>标签为止
    • pre-wrap：用等宽字体显示预格式化的文本，空白字符会被浏览器保留，文本会换行
    • pre-line：保持换行符，合并空白符
  • 示例代码：
<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .wrap{

            padding: .5em;

            line-height: 1.5;

            background: hsl(20, 50%, 95%);

            background-image: linear-gradient(

                            rgba(120,0,0,.1) 50%, transparent 0);

            background-size: auto 3em;

            background-origin: content-box;

            font-family: Consolas, Monaco, monospace;

        }

        .wrap code{

            font: inherit;

        }

    </style>

</head>

<body>

<pre class="wrap"> <code> while(true){

    i++;

    if(i>10){

        break;

    }else{

        console.log(i);

    }

}</code></pre>

</body>

三、调整tab的宽度

  • 注意Ide是否应用的tab替换为space的功能，必须要关闭。
  • 利用tab-size指定tab的大小
  • 示例代码
<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        pre, code{

            font-family: monospace;

        }

        pre{

            white-space: pre;

            background: red;

            tab-size: 2;

            display: block;

        }

    </style>

</head>

<body>

<pre><code>

while(true){

    var d = new Date();

}

</code></pre>

</body>

四、自定义下划线

  • linear-gradient的角度，默认是180deg
  • text-shadow实现阴影效果，做出左右阴影偏移
  • 存在兼容性问题，chrome50版本没有下划线显示
  • 示例代码:
<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body {

            font: 250%/1.6 Baskerville, Palatino, serif;

        }

        a {

            background: -webkit-linear-gradient(gray, gray) no-repeat;

            background-size: 100% 1px;

            background-position: 0 1.02em;

            text-shadow: .05em 0 white, -.05em 0 white; /*水平左、右偏移一个背景色的阴影，用于降级字母的下半处理*/

        }

        p:nth-child(2) a {

            background: -webkit-linear-gradient(180deg, gray 66%, transparent 0) repeat-x; /*0,180deg都是可以的*/

            background-size: .2em 2px;

            background-position: 0 1em;

        }

    </style>

</head>

<body>

    <p>The only way to <a>get rid of a temptation</a> is to <a>yield</a> to it.</p>

    <p>The only way to <a>get rid of a temptation</a> is to <a>yield</a> to it.</p>

</body>

五、现实中的文字效果

  • text-shadow实现的效果不能退化，如果浏览器不支持则看不见，可以用filter实现，但支持得更好（但可以退化样式）
  • text-shadow设置多个值，并按递增规则偏移，可以制作出立体效果
  • 凸版文字
    • 字体太小text-shadow属性产生的效果不可接受
    • 示例代码：
<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            font: 110%/1.6 Baskerville, Palatino, serif; /*字体过小表现不出样式*/

        }

        .wrap{

            width: 200px;

            background: hsl(210, 13%, 60%);

            color: hsl(210, 13%, 30%);

            padding: .1em;

            text-shadow: 0 1px 1px hsla(0, 0%, 100%, .8);

        }

        .wrap02{

            margin-top: 10px;

            width: 200px;

            background: hsl(210, 13%, 60%);

            color: hsl(210, 13%, 30%);

            padding: .1em;

            text-shadow: 0 -1px 1px hsla(0, 0%, 100%, .8);

        }

    </style>

</head>

<body>

    <div class="wrap">

        <span>根据协议，四省（市）将深化教育综合改革合作交流.</span>

    </div>

    <div class="wrap02">

        <span>根据协议，四省（市）将深化教育综合改革合作交流.</span>

    </div>

</body>

  • 其他效果示例代码：
<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .wrap{

            text-align: center;

            font-size: 38px;

            width: 200px;

            background: deeppink;

            color: white;

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

        }

        .wrap02{

            margin-top: 10px;

            font-size: 38px;

            width: 200px;

            text-align: center;

            background: #203;

            color: #ffc;

            transition: 1s;

        }

        .wrap02:hover{

            text-shadow: 0 0 .1em, 0 0 .3em;

            color:transparent;

        }

        .wrap03{

            margin-top: 10px;

            width: 200px;

            font-size: 38px;

            text-align: center;

            color: white;

            background: hsl(0,50%,45%);

            text-shadow: 0 1px hsl(0, 0%, 85%),

                         0 2px hsl(0, 0%, 65%),

                         0 3px hsl(0, 0%, 45%),

                         0 4px hsl(0, 0%, 25%),

                         0 5px hsl(0, 0%, 5%),

                         0 5px 10px black;

        }

        .wrap04{

            margin-top: 10px;

            width: 200px;

            font-size: 38px;

            text-align: center;

            color: white;

            background: hsl(0,50%,45%);

            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;

        }

    </style>

</head>

<body>

    <div class="wrap">

        <span>CSS</span>

    </div>

    <div class="wrap02">

        <span>CSS</span>

    </div>

    <div class="wrap03">

        <span>CSS</span>

    </div>

    <div class="wrap04">

        <span>CSS</span>

    </div>

</body>

六、自定义复选框

  • 系统自带复选框美化
    • 利用css3提供的:checked伪类选择器实现
    • 宽、高、对齐等设置单位最好用em，让按钮变得更为灵活
    • 示例代码：
<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        input[type="checkbox"]{

            display: none;

        }

        input[type="checkbox"] + label::before{

            content: '\a0'; /*不换行空格*/

            display: inline-block;

            background: silver;

            border-radius: .2em;

            margin-right: .2em;

            width: .8em;

            height: .8em;

            line-height: .65em;

            text-indent: .15em;

        }

        input[type="checkbox"]:checked + label::before{

            content: '\2713';

            background: yellowgreen;

        }

    </style>

</head>

<body>

    <input type="checkbox" id="anesome"/>

    <label for="anesome">anesome</label>

</body>
  • 开关按钮的实现
    • 伪类选择器 + 修饰label元素实现
    • 示例代码：
<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        input[type="checkbox"]{

            display: none;

        }

        input[type="checkbox"] + label{

            display: inline-block;

            padding: .3em .5em;

            background: #ccc;

            border: 1px solid rgba(0, 0, 0, .2);

            background-image: linear-gradient(#ddd,#bbb);

            text-align: center;

            border-radius: .3em;

            box-shadow: 0 1px white inset;

            text-shadow: 0 1px 1px white;

        }

        input[type="checkbox"]:checked + label{

            box-shadow: .05em .1em .2em rgba(0, 0, 0, .6) inset;

            border-color: rgba(0, 0, 0, .3);

            background: #bbb;

        }

    </style>

</head>

<body>

    <input type="checkbox" id="anesome"/>

    <label for="anesome">anesome</label>

</body>

CSS3新特性应用之字体排印的更多相关文章

  1. H5 和 CSS3 新特性

    博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...

  2. css3新特性总结

    一.什么是css3 css用于控制网页的样式和布局,css3是css的升级版本,受浏览器限制,跨浏览器开发有点复杂.css3完全向后兼容 二.css3新特性 1.边框 css3的边框有如下属性: (1 ...

  3. 01-移动端开发教程-CSS3新特性

    1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...

  4. css css3新特性

    css  css3新特性 一.css3是什么? 我不喜欢把已有的概念从一个地方抄到另一个地方,还是喜欢如下方式. 参考百度百科: http://baike.baidu.com/link?url=z2V ...

  5. [转]深入了解 CSS3 新特性

    简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外 ...

  6. HTML5和CSS3新特性

    1.HTML5新标签和属性 1.1 兼容性前缀与语义化 兼容低版本的写法.比较新的浏览器,可以直接写.兼容性前缀,是每个浏览器私有的. 内核 兼容性前缀 浏览器 Gecko -moz- Firefox ...

  7. 新特性AAtitti css3 新特性attilax总结titti css

    Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...

  8. Atitti css3 新特性attilax总结

    Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...

  9. CSS3新特性（阴影、动画、渐变、变形、伪元素等）

    CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等)   目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...

随机推荐

  1. 手动导入swift三方danielgindi/Charts到OC工程中教程

    1.到github网址上下载zip压缩包https://github.com/danielgindi/Charts 2.然后将解压后的文件夹整个拖到自己的工程文件夹下(很多教程只让拖xcodeproj ...

  2. RunLoop 总结：RunLoop的应用场景（一）

    参考资料 好的书籍都是值得反复看的,那好的文章,好的资料也值得我们反复看.我们在不同的阶段来相同的文章或资料或书籍都能有不同的收获,那它就是好文章,好书籍,好资料.关于iOS 中的RunLoop资料非 ...

  3. mysql 赋予用户权限

    # 赋予权限MySQL> grant 权限参数 on 数据库名称.表名称 to 用户名@用户地址 identified by '用户密码'; # 立即生效权限MySQL> flush pr ...

  4. php+websocket搭建简易聊天室实践

    1.前言 公司游戏里面有个简单的聊天室,了解了之后才知道是node+websocket做的,想想php也来做个简单的聊天室.于是搜集各种资料看文档.找实例自己也写了个简单的聊天室. http连接分为短 ...

  5. POJ1743 Musical Theme [后缀数组]

    Musical Theme Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 27539   Accepted: 9290 De ...

  6. 用 eric6 与 PyQt5 实现python的极速GUI编程（系列04）---- PyQt5自带教程：地址簿(address book)

    [引子] 在PyQt5自带教程中,地址簿(address book)程序没有完全实现界面与业务逻辑分离. 本文我打算用eric6+PyQt5对其进行改写,以实现界面与逻辑完全分离. [概览] 1.界面 ...

  7. BoneCP 升级遇到的问题

    Caused by: org.springframework.beans.BeanInstantiationException: Could not instantiate bean class [c ...

  8. 在网上摘录一段对于IOC的解析，比较直观，大家观摩观摩

    其实IoC非常简单,基本思想就是面向接口的编程,只是老外给起了个名字名充分利用之. 简单的说,传统模式下,如果你要用钱,你需要去银行取,IoC模式下,银联在你家安了一个取款机,你直接找取款机要钱就可以 ...

  9. tomcat安装和配置

    官网下载最新的tomcat9,解压 http://tomcat.apache.org/download-90.cgi 环境变量配置 JAVA_HOME: C:\Program Files\Java\j ...

  10. JavaScript权威设计--JavaScript对象(简要学习笔记八)

    1.属性的特性 一个属性包含一个名字和4个特性.4个特性:值,可写性,可枚举性,可配置性   2.对象的三个属性 一:原型属性 要想检测一个对象是否是另一个对象的原型,使用isPrototypeOf( ...