zoukankan      html  css  js  c++  java
  • CSS3实现文本垂直排列-writing-mode

    最近的一个项目中要使文字垂直排列,也就是运用了CSS的writing-mode属性。

    writing-mode最初时ie中支持的一个属性,后来在CSS3中增添了这一新的属性,所以在ie中和其他浏览器中的语法会有区别。

    一、CSS3标准

    writing-mode:horizontal-tb;//默认:水平方向,从上到下 
    writing-mode:vertical-rl;  //垂直方向,从右向左
    writing-mode:vertical-lr;  //垂直方向,从左向右

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            .textinfo {
                height: 250px;
                padding: 10px;
                border: 1px solid red;
                writing-mode: vertical-rl;
            }
        </style>
    </head>
    
    <body>
        <div class="textinfo">
            发布已启动: 项目: QL.Back.API, 配置: Release Any CPU
        </div>
    </body>
    
    </html>

    二、实现按钮点击文字下沉效果

    我们可以设置文字的writing-mode,然后在结合text-indent来实现文字点击时的下沉效果;

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            .btn {
                width: 50px;
                height: 50px;
                line-height: 50px;
                color: white;
                text-align: center;
                font-size: 16px;
                ;
                display: inline-block;
                border-radius: 50%;
                background: gray;
                cursor: pointer;
            }
    
            .btn:active {
                text-indent: 2px;
            }
    
            .vertical-text {
                writing-mode: tb-rl;
                -webkit-writing-mode: vertical-rl;
                writing-mode: vertical-rl;
                *writing-mode: tb-rl;
            }
        </style>
    </head>
    
    <body>
        <span>点击领红包</span>
        <p class="vertical-text btn"></p>
    </body>
    
    </html>

     更多:

    border-radius实例2

     CSS Blur() 将高斯模糊应用于输出图片

    Css3 文字渐变整理(一)

     
  • 相关阅读:
    Java的字符串及格式化输入输出
    Java的数据类型与类型转换
    java基本程序
    svn基础入门
    github基础入门笔记
    git基础入门笔记
    linux基础入门笔记
    二、FreeMarker 模版开发指南 第二章 数值和类型
    【CodeForces】[599B]Spongebob and Joke
    【CodeForces】[612B]HDD is Outdated Technology
  • 原文地址:https://www.cnblogs.com/tianma3798/p/12177496.html
Copyright © 2011-2022 走看看