HTML5 文本屬性

       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:轉換成小寫;


      
發佈了26 篇原創文章 · 獲贊 3 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章