目录

一、插入换行

  • ~：表示同辈元素之后指定类型的元素，如;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. Activity之概览屏幕(Overview Screen)

    概览屏幕 概览屏幕(也称为最新动态屏幕.最近任务列表或最近使用的应用)是一个系统级别 UI,其中列出了最近访问过的 Activity 和任务. 用户可以浏览该列表并选择要恢复的任务,也可以通过滑动清除 ...

  2. linux yum命令详解

    yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器.基於RPM包管理,能够从指定的服务器自动下载RP ...

  3. 领域驱动设计实战—基于DDDLite的权限管理OpenAuth.net

    在园子里面,搜索一下“权限管理”至少能得到上千条的有效记录.记得刚开始工作的时候,写个通用的权限系统一直是自己的一个梦想.中间因为工作忙(其实就是懒!)等原因,被无限期搁置了.最近想想,自己写东西时, ...

  4. 小丁带你走进git世界一-git简单配置

    小丁带你走进git世界一-git简单配置 1.github的简单配置 配置提交代码的信息,例如是谁提交的代码之类的. git config  –global user.name BattleHeaer ...

  5. Sublime Text 全程指引 by Lucida

    作者:Lucida 微博:@peng_gong 豆瓣:@figure9 博客园:@figure9 原文链接:http://zh.lucida.me/blog/sublime-text-complete ...

  6. C++ std::multimap

    std::multimap template < class Key, // multimap::key_type class T, // multimap::mapped_type class ...

  7. Java——搭建自己的RESTful API服务器（SpringBoot、Groovy）

    这又是一篇JavaWeb相关的博客,内容涉及: SpringBoot:微框架,提供快速构建服务的功能 SpringMVC:Struts的替代者 MyBatis:数据库操作库 Groovy:能与Java ...

  8. iOS 4s-6Plus屏幕自动适配及颜色转换为十六进制

    iOS各种屏幕自动适配及颜色转换为十六进制 ★★★XLJMatchScreen自动适配屏幕★★★ 支持pod导入 pod 'XLJScreenMatching', '~> 1.0.3' 如果发现 ...

  9. iOS-----App闪退，程序崩溃---解决方案

    1.iOS-中app启动闪退的原因 2.iOS开发-闪退问题-解决之前上架的 App 在 iOS 9 会闪退问题 3.iOS-应用闪退总结 4.iOS开发-捕获程序崩溃日志 5.iOS开发-应用崩溃日 ...

  10. git revert和reset区别

    1.在github上建立测试项目并克隆到本地 2.本地中新建两个文本文件 3.将a.txt commit并push到远程仓库 执行 git add a.txt, git commit -m " ...