目录

一、插入换行

  • ~：表示同辈元素之后指定类型的元素，如;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. 我的MYSQL学习心得（十一） 视图

    我的MYSQL学习心得(十一) 视图 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据 ...

  2. 安全防范：nginx下git引发的隐私泄露问题

    安全防范:nginx下git引发的隐私泄露问题 1   安全事件 最近阿里云服务器后台管理系统中收到一条安全提示消息,系统配置信息泄露: http://my.domain.com/.git/confi ...

  3. 微信硬件H5面板开发(二) ---- 实现一个灯的控制

    在第一节中讲解了openApi的调用,这一篇讲一下如何实现一个灯的控制.就用微信提供的lamp例子来做,将代码扒下来(实在是没办法,没有示例),整合到自己的项目中.lamp源码:http://file ...

  4. Fedora 22中的用户和用户组管理

    The control of users and groups is a core element of Fedora system administration. This chapter expl ...

  5. java遇到 Check $M2_HOME 问题 解决-Dmaven.multiModuleProjectDirectory system property is not set. Check $M2_HOME environment variable and mvn script match.

    步骤: 1.添加M2_HOME的环境变量 2.Preference->Java->Installed JREs->Edit 选择一个jdk 3.添加 -Dmaven.multiMod ...

  6. CocoaPods被卡住:Updating local specs repositories

    使用CocoaPods被卡住:Updating local specs repositories 使用 pod install --verbose --no-repo-update

  7. iOS-----程序异常处理----- 断言NSAssert()和NSParameterAssert区别和用处

    NSAssert和assert是断言,主要的差别是assert在断言失败的时候只是简单的终止程序,而NSAssert会报告出错误信息并且打印出来.所以尽管的使用NSAssert,可以不去使用asser ...

  8. VMware下Windows Server 2012添加新磁盘

    系统管理员在VM下新装了一台Windows Server 2012服务器,我在上面安装了SQL Server 2014 Standard版数据库,安装之初,只分配了一个C盘,我想在这台服务器上添加了三 ...

  9. Windows 10 部署Enterprise Solution 5.5

    Windows 10正式版发布以后,新操作系统带来了许多的变化.现在新购买的电脑安装的系统应该是Windows 10.与当初用户不习惯Windows 7,购买新电脑后第一个想做的事情就是重装成XP,估 ...

  10. 03.Web大前端时代之：HTML5+CSS3入门系列~H5功能元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1.hgroup 对网页或区段(secti ...