目录

一、插入换行

  • ~：表示同辈元素之后指定类型的元素，如;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. 关系型数据库与NoSQL数据库

    关系型数据库的优缺点 优点: 可以做事务处理,从而保证了数据的一致性: 可以进行JOIN等多表查询: 由于以SQL标准化为前提,数据更新的开销很小(相同的字段基本上都只有一处). 缺点: 大量数据的写 ...

  2. Linux实战教学笔记06:Linux系统基础优化

    第六节 Linux系统基础优化 标签(空格分隔):Linux实战教学笔记-陈思齐 第1章 基础环境 第2章 使用网易163镜像做yum源 默认国外的yum源速度很慢,所以换成国内的. 第一步:先备份 ...

  3. maven常见异常以及解决方法

    本文写的是我在整合ssm框架时遇到的一些问题,我估计很多人也会遇到,所以,这里作为一个总结,希望能够帮助大家解决问题 一,加入shiro组件时抛出的异常 加入步骤(略) 问题 1,保存后,无法导入sh ...

  4. MVP初探

    什么是MVP MVP是一种UI的架构模式,是MVC的一种变体,适用于基于事件驱动的应用框架.MVP中的M和V分别对应了MVC中的Model和View,而P代替了Controller,而它更多地体现在了 ...

  5. 解决Windows 8.1中所有的应用(Modern App)无法打开（闪退）的问题

    我已经在3台电脑上遇到这个问题了,症状是,所有应用商店安装的App都无法打开,包括应用商店本身,在开始界面点击应用以后,应用的Logo一闪而过,然后就消失了,回到了开始界面.查看系统应用日志,会有这样 ...

  6. 页面与ViewModel（上）

    在UWP淘宝与旺信中,笔者主要负责页面与控件的制作,这些工作看似简单,但要想做的全面细致仍然需要深入的思考.本文想分享一些在UWP旺信的制作过程中,笔者在UI页面与控件制作上体会到的一些心得.可能笔者 ...

  7. Spring cookie 实战

    测试环境搭建 使用Springboot构建web server, 在测试方法中打印接收的cookie. @RestController @RequestMapping("/register/ ...

  8. 在 Ubuntu 15.04 中使用 ubuntu-make、Eclipse 4.4、Java 8 以及 WTP

    Ubuntu 今天发布新版本了 其实昨天(2015-04-23)我就看到了 Ubuntu 发布新版本的新闻,下班后回家的第一件事就是访问 Ubuntu 的官网,很可惜,没有提供下载.今天(2015-0 ...

  9. 死去活来，而不变质：Domain Model（领域模型） 和 EntityFramework 如何正确进行对象关系映射？

    写在前面 阅读目录: 设计误区 数据库已死 枚举映射 关联映射 后记 在上一篇<一缕阳光:DDD(领域驱动设计)应对具体业务场景,如何聚焦 Domain Model(领域模型)?>博文中, ...

  10. 如何在 Visual Studio 中使用 Git 同步代码到 CodePlex

    开源社区不管在国内还是国外都很火热,微软也曾因为没有开源而倍受指责,但是随着 .Net framework.ASP.Net MVC等框架的逐渐开源,也让大家看到了微软开源的步伐.CodePlex 则是 ...