HTML5 文本属性

来源:互联网 发布:艾滋病 知乎 编辑:程序博客网 时间:2024/06/05 08:14
       1.   边框属性
          border=radius :上右下左; 取值和margin很像
          border-radius :60px 30px 40px  50px /40px 50px 60px 70px
          如果border-radius有斜杠,左边的就代表水平方向(X轴),右边的代表垂直方向(Y轴)
          同样的顺序需还是上右下左
          border-radius:50%(超过50%) 会变成圆形


      2.    文本属性
          white-space:文档中的空白处
          属性值:noraml: 默认忽略多个空格,只输出一个空格 .
                nowrap: 强制不换行
                pre:空格/缩进/换行 会给保留
                pre-line:合并空表(多个空格只会输出一个空格)
                pre-warp:保留空白/缩进,正常换行 ;


      3.    文本超出换行
          Word-warp:允许长单词转换到下一行
          Word-break:允许在单词内转行(自动换行) ..


       4.   文字摆放形式
          direction: 文字摆放方向
          属性值 rtl:文字往右向左摆放;
                 trl:(默认)文字往左向右摆放;
          unicode-bidi: 文字内容倒向摆放
           属性值: bidi-override:文字从右到左;


        5.    文本单行超出显示省略号
             多余的文字先让他隐藏 :overflow-hidden;
             让文本显示在一行    :white-space:nowrap;
             文本显示省略号:  text-overflow:ellipsis;
             //必须要这三个样式才可以有效果
             //一般使用后台设置省略..
          6.盒子阴影
          box-shadow:文字阴影;
          //可以有五个值  (水平偏移(X),垂直偏移(Y),扩散程度,尺寸, 颜色 )   //尺寸一般可以省略
          举例: box-shadow: 0 0 10px red; //可以是rgba,#000;
          可以有多个值
          举例: box-shadow: 0 0 10px red, 0 0 10px blue;
           可以有内阴影 :
          举例: box-shadow: inset 0 0 10px red;


           7.文字阴影:
          text-shadow:
        //可以有四个值  (水平偏移(X),垂直偏移(Y),模糊度,颜色 )
           举例: text-shadow: 0 0 10px red; //可以是rgba,#000;
          可以有多个值
          举例: text-shadow: 0 0 10px red,0 0 10px blue;


          8.文本描边,文字填充: //兼容性差,很少用
          text-stroke:
          //两个值 (大小,颜色) 有兼容性 所以需要加兼容前缀
         举例  -webkit-text-stroke:2px,red;  //谷歌
               -mos-text-stroke:2px,red   //火狐
          text-fill-width: 描边宽度    //理解就行
          text-fill-color: 描边颜色    //理解就行


          9.转换大小写:
          text-transform:
          属性值: none(默认) 无转换;
                  capitalize:每个单词第一个字母为大写;
                  upercase :转换成大写;
                  lowercase:转换成小写;


      
0 0
原创粉丝点击