北京快3 0110306期:CSS3实现文本垂直排列的方法

北京快三走势图 www.mxld9.cn   发布时间:2018-07-10 16:44:33   作者:逆旅wy   我要评论

这篇文章主要介绍了CSS3实现文本垂直排列的方法,也就是运用了CSS的writing-mode属性,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

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

1.0 CSS3标准

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

demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS文字垂直排列</title>
        <style type="text/css">
            div{
                border: 1px solid lightblue;
                padding: 5px;
            }
            .vertical-text{
                -webkit-writing-mode: vertical-rl;
                writing-mode: vertical-rl;
            }
        </style>
    </head>
    <body>
        <div class="vertical-text">
            1. 文字垂直排列 <br />
            2. 文字垂直排列
        </div>
    </body>
</html>

2.0 IE中

由于历史的原因,IE下该属性值则显得尤为复杂:

-ms-writing-mode: lr-tb | rl-tb | tb-rl | bt-rl | tb-lr | bt-lr | lr-bt | rl-bt | lr | rl | tb

具体可以查看官方文档:

https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode/

3.0 一些应用

3.1 垂直居中

通过对这个属性的使用,我们可以结合 text-align:center 实现垂直居中或者使用margin: auto。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS3 图片垂直居中</title>
        <style type="text/css">
            div{
                border: 1px solid lightblue;
                padding: 5px;
                height: 500px;
            }
            .vertical-img{
                -webkit-writing-mode: vertical-rl;
                -ms-writing-mode: bt-rl;
                writing-mode: vertical-rl;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="vertical-img">
             <img src="1.jpg"/>
        </div>
    </body>
</html>

3.2 文字下沉效果

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文字下沉效果</title>
        <style type="text/css">
            .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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

最新评论

  • 中共中央直属机关党校 2019-04-21
  • 全国自由搏击锦标赛落下帷幕 2019-04-20
  • 近来人民网强国社区的评论少了很多,那是因为人们反映事实存在的问题,绝大多数都是说了等于白说,于是渐渐地失望了,渐渐地越来越多的人“算了,不说了!” 2019-04-19
  • 热巴窦骁携手演绎经典神话 2019-04-19
  • 神奇!沈阳现3D稻田画 2019-04-18
  • 中国和巴基斯坦将合拍电影《天路》 2019-04-18
  • 电视剧抱团出海 又有哪些作品走出了国门 2019-04-17
  • 谈判与加关税的不同在于,后者没有给小左唱赞歌的机会 2019-04-16
  • 全世界人民都要顺应人类社会发展规律,不断扩大社会财富公有制的范围,不断缩小社会财富私有制的范围,以便最终消灭社会财富私有制,建立共产主义社会财富公有制。 2019-04-15
  • 新时代·新征程十九大精神在基层---“各地聚焦”--湖南频道--人民网 2019-04-14
  • 首部由中国人翻译的120回《三国演义》问世 2019-04-14
  • 2022年冬奥会筹备进行时 2019-04-13
  • 牙膏的10个超实用功能 速收藏 2019-04-13
  • 新华保险荆州中支助力首届荆楚文化旅游节开幕 2019-04-12
  • 未来十天 山西以对流性天气为主 多阵性降水 2019-04-12
  • 903| 279| 219| 901| 745| 212| 288| 360| 500| 776|