专栏首页cnblogsCSS3新特性应用之字体排印

CSS3新特性应用之字体排印

一、插入换行

  • ~:表示同辈元素之后指定类型的元素,如;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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Css3新特性应用之视觉效果

    一、单侧阴影 box-shadow属性的应用,格式:h-shadow v-shadow blur spread color inset属性取值介绍 h-sah...

    sam dragon
  • Css3新特性总结之边框与背景(一)

    本系列主要总结Css3一些新特性的认识,来源于《css揭秘》书。 一、半透明边框 css3最好用hsla,而不是rgba,hsla是:h:颜色值(0~360);...

    sam dragon
  • Css3新特性总结之边框与背景(二)

    一、条纹背景 利用background为linear-gradient函数实现,linear-gradient取值如下: <angle>:角度,渐变的方向 t...

    sam dragon
  • Typecho1.1仿简书主题小屏幕菜单栏展开优化

    介于我的菜单标题最多就两个字,所以宽度可以设置窄一点,美观一些。于是我在/css/style.css里面修改了样式。

    用户7744319
  • 前端基础-CSS基础(七)

    efonfighting
  • wordpress美化-文章标题样式美化

    找到当前主题的标题样式,然后去主题样式文件修改。(一般在主题根目录style.css)

    AlexTao
  • 为博客添加恋爱天数小工具

    AlexTao
  • IOS下box-shadow的诡异bug的修复

    先说环境,我测试了两台IOS手机,iphone 8 ios 11.4.1 和 iphone 6s plus ios 11.4.1,都存在这个诡异的bug。

    用户1515472
  • 使用iframe实现在pc端预览移动端页面的效果

    前段时间需要做一个在PC端预览移动端的功能,由于我是前端不太好,就在网上查找资料,花了半天的时间终于有所收获,在这里把我的实现代码分享给大家。想要在PC端实现模...

    AlbertYang
  • 小程序左右标签滑块排行榜

    达达前端

扫码关注云+社区

领取腾讯云代金券