zoukankan      html  css  js  c++  java
  • css3-文本新增属性

    rgba:a是设透明度值

    应用:background:rgb(255,255,255,0.5)
    color:rgb(255,255,255,0.5)
    border:1px solid rgb(255,255,255,0.5)
    text-shadow:文字阴影
    text-shadow:左右偏移量 上下偏移量 模糊的程度 阴影颜色
    还可以阴影叠加,如text-shadow:-5px -10px 1px red,5px 10px 2px green;

    文字描边

    -webkit-text-stroke:3px red;
    -o-text-text-stroke:3px red;
    -moz-text-stroke:3px red;
    text-stroke:3px red;
    文字效果

    文字阴影

    h1{text-align:center;color:pink;font-size:100px;font-weight:bold; text-shadow:2px 2px 0px white,4px 4px 0px pink;}
    

    文字效果

    文字排版(全兼容)

    要跟unicode-bidi配合使用unicode-bidi:bidi-override;

    <style>
    p{300px; border:1px solid #000;font:14px/30px "宋体"; direction:rtl; unicode-bidi:bidi-override;}
    </style>
    </head>
    
    <body>
    <p>文本新增属性哎呦啦</p>
    </body>
    

    文字效果

    超出显示省略号

    <style>
    p{300px; border:1px solid #000;font:14px/30px "宋体"; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}<!-- white-space:nowrap超出不换行,text-overflow:ellipsis文字超出后显示省略号,无省略号clip-->
    </style>
    </head>
    
    <body>
    <p>博客园是个好地方博客园是个好地方博客园是个好地方博客园是个好地方</p>
    </body>
    

    效果如图:

  • 相关阅读:
    Paths on a Grid
    Three Kingdoms(优先队列+bfs)
    Factstone Benchmark(数学)
    C. Searching for Graph(cf)
    B. Trees in a Row(cf)
    String Successor(模拟)
    乘积最大的分解(数学)
    Kindergarten Election
    In 7-bit
    Friends
  • 原文地址:https://www.cnblogs.com/zswmv/p/6711503.html
Copyright © 2011-2022 走看看