码迷,mamicode.com
首页 > Web开发 > 详细

CSS3实现文本垂直排列-writing-mode

时间:2020-01-10 18:40:22      阅读:123      评论:0      收藏:0      [点我收藏+]

标签:order   一个   isp   port   浏览器   writing   idt   html   point   

最近的一个项目中要使文字垂直排列,也就是运用了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 文字渐变整理(一)

 

CSS3实现文本垂直排列-writing-mode

标签:order   一个   isp   port   浏览器   writing   idt   html   point   

原文地址:https://www.cnblogs.com/tianma3798/p/12177496.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!