北京pk10五码分析技巧: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-02-18
  • 不是“不尊重公投”,而是不尊重人类社会发展规律就是不尊重人类。 2019-02-18
  • 学习宣传贯彻习近平新时代中国特色社会主义思想系列研讨会第三场研讨会发言摘编 2019-02-17
  • 新能源汽车纳入蚌埠市级政府集中采购目录 2019-02-16
  • 北京:走进高考阅卷现场 2019-02-15
  • 环球 —频道 春城壹网 七彩云南 一网天下 2019-02-15
  • 合肥市庐阳中学启动“教师成长工程” 2019-02-14
  • 美国八旬教授 太原免费教英语 2019-02-14
  • 安徽省投资集团控股有限公司 2019-02-13
  • 新疆维吾尔自治区交通运输厅 2019-02-12
  • 中国对外投资连续7个月增长 “一带一路”相关国家投资成亮点 2019-02-12
  • 永葆中国共产党人奋斗精神 2019-02-11
  • 我们的节日2018端午——华龙网 2019-02-10
  • 李鹏国的行为是对善良的一种打击,暴露了资本主义的道貌岸然的虚伪本质,女白领的同情心是值得赞扬的,只有不够,没有毛病 2019-02-10
  • 三只央企结构调整ETF 及联接基金获批 2019-02-09
  • 23| 272| 716| 766| 82| 246| 661| 86| 848| 659|