Webkit 文字和背景效果

2022-08-31 23:51:24 字數 2792 閱讀 9519

-webkit-background-clip:padding-box | border-box | content-box | text,指定物件的背景影象向外裁剪的區域。對應的指令碼特性為backgroundclip

padding-box

從padding區域(不含padding)開始向外裁剪背景。

border-box

從border區域(不含border)開始向外裁剪背景。

content-box

從content區域開始向外裁剪背景。

text

從前景內容的形狀(比如文字)作為裁剪區域向外裁剪,如此即可實現使用背景作為填充色之類的遮罩或實現文字漸變的效果。

示例:

div.bgtest

<

div

class

="bgtest"

>

背景測試 background test

div>

結果:text

padding-box和border-box(不知為何兩者感覺沒區別)

設定或檢索物件的背景影象計算background-position時的參考原點(位置)。對應的指令碼特性為backgroundorigin

padding-box

從padding區域(含padding)開始顯示背景影象。

border-box

從border區域(含border)開始顯示背景影象。

content-box

從content區域開始顯示背景影象。

示例:background-position:設定背景影象的起始位置,詳細

-webkit-background-size:設定物件的背景影象的尺寸大小。該屬性提供2個引數值(特性值cover和contain除外)。如果提供兩個,第乙個用於定義背景影象的寬度,第二個用於定義背景影象的高度。如果只提供乙個,該值將用於定義背景影象的寬度,第2個值預設為auto,即高度為auto,此時背景圖以提供的寬度作為參照來進行等比縮放。對應的指令碼特性為backgroundsize

用長度值指定背景影象大小。不允許負值。

用百分比指定背景影象大小。不允許負值。

auto

背景影象的真實大小。

cover

將背景影象等比縮放到完全覆蓋容器,背景影象有可能超出容器。

contain

將背景影象等比縮放到寬度或高度與容器的寬度或高度相等,背景影象始終被包含在容器內。

示例:文字相關:

-webkit-rtl-ordering:logical | visual

logical

預設。visual

文字從右到左是倒序著編碼,所以整個文字行可以從左到右呈現。

-webkit-text-fill-color:設定物件中的文字填充顏色。若同時設定text-fill-color和color,text-fill-color定義的顏色將覆蓋color屬性;通過text-fill-color屬性,可以做出一些例如漸變文字和鏤空文字的效果

-webkit-text-security:指定要使用的形狀來代替文字的顯示。

none

無。circle

圓圈。disc

圓形。square

正方形。

-webkit-text-stroke :[ text-stroke-width ] | [ text-stroke-color ]。復合屬性。設定或檢索物件中的文字的描邊。

-webkit-writing-mode:horizontal-tb | vertical-rl | vertical-lr | lr-tb | tb-rl

horizontal-tb

水平方向自上而下的書寫方式。即 left-right-top-bottom(類似ie私有值lr-tb)

vertical-rl

垂直方向自右而左的書寫方式。即 top-bottom-right-left(類似ie私有值tb-rl)

vertical-lr

垂直方向自左而右的書寫方式。即 top-bottom-left-right

lr-tb

左-右,上-下。物件中的內容在水平方向上從左向右流入,後一行在前一行的下面。 所有的字形都是豎直向上的。這種布局是羅馬語系使用的(ie)

tb-rl

上-下,右-左。物件中的內容在垂直方向上從上向下流入,自右向左。後一豎行在前一豎行的左面。全形字符是豎直向上的,半形字元如拉丁字母或片假名順時針旋轉90度。這種布局是東亞語系通常使用的(ie)

-webkit-marquee:,定義展示內容的屬性

文字滾動的方向

每次移動的距離

文字滾動的重複次數

文字滾動的方式

滾動或滑動的速度

各屬性取值:

以上內容來自:

CSS 文字和背景

文字樣式 屬性名 屬性值說明 color 顏色 red ff00ff rgb 0,255,255 rgba 0,0,255,0.5 預設值,英文顏色 十六進製制顏色值 色彩函式 紅,綠,藍 色彩函式 紅,綠,藍,透明度 text align 水平對齊 left right center justif...

設定Button背景漸變效果和點選效果

1 設定背景漸變效果,在drawable目錄下建buttonshape.xml檔案,內容為 android shape rectangle 這裡startcolor是開始顏色,endcolor是漸變結束顏色,預設是從上往下漸變,可以使用android centery調節,android angle ...

設定Button背景漸變效果和點選效果

1 設定背景漸變效果,在drawable目錄下建buttonshape.xml檔案,內容為 android shape rectangle 這裡startcolor是開始顏色,endcolor是漸變結束顏色,預設是從上往下漸變,可以使用android centery調節,android angle ...