• CSS3新特性应用(1️⃣)字体排印


    一、插入换行

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

  • 相关阅读:
    matlab read txt
    matlab读取数据并操作
    NFS 共享信息泄露漏洞
    centos6.8环境下安装elasticdump进行elasticsearch索引结构mapping的备份
    Linux命令行下如何终止当前程序
    ubuntu 使用sudo vim /etc/apt/sources.list命令修改文件后该如何退出?
    隐写工具zsteg安装及使用教程
    【转】今天做CTF隐写术的题偶然发现一隐写图片查看的神器------stegsolve,分享给大家
    java安装及配置环境变量
    deepin使用root身份运行
  • 原文地址:https://www.cnblogs.com/xiao-love-meng/p/6196383.html
Copyright © 2020-2023  润新知