mask-border

このプロパティは以下の CSS プロパティの一括指定です。

• mask-border-mode
• mask-border-outset
• mask-border-repeat
• mask-border-slice
• mask-border-source
• mask-border-width

<'mask-border-source'>

ソース画像です。mask-border-source を参照してください。

<'mask-border-slice'>

ソース画像を複数の領域に分割する幅です。mask-border-slice を参照してください。

<'mask-border-width'>

境界画像の幅です。4 つまでの値を指定することができます。mask-border-width を参照してください。

<'mask-border-outset'>

要素の外側の辺から境界画像までの距離です。4 つまでの値を指定することができます。mask-border-outset を参照してください。

<'mask-border-repeat'>

ソース画像の辺の領域を、境界マスクの幅に合わせて調整する方法を定義します。2 つまでの値を指定することができます。mask-border-repeat を参照してください。

<'mask-border-mode'>

ソース画像を輝度マスクとして扱うか、アルファマスクとして扱うかを定義します。mask-border-mode を参照してください。

mask-border = 
  <'mask-border-source'>                              ||
  <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]?  ||
  <'mask-border-repeat'>                              ||
  <'mask-border-mode'>                                

<mask-border-source> = 
  none     |
  <image>  

<mask-border-slice> = 
  [ <number> | <percentage> ]{1,4} fill?  

<mask-border-width> = 
  [ <length-percentage> | <number> | auto ]{1,4}  

<mask-border-outset> = 
  [ <length> | <number> ]{1,4}  

<mask-border-repeat> = 
  [ stretch | repeat | round | space ]{1,2}  

<mask-border-mode> = 
  luminance  |
  alpha      

<image> = 
  <url>       |
  <gradient>  

<length-percentage> = 
  <length>      |
  <percentage>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

この例では、要素の境界を菱形の模様でマスクします。このマスクのソースは ".png" ファイルで、 90 x 90 ピクセルであり、3つの菱形が垂直・水平に並んでいます。

一つの菱形の寸法に合わせるため、 90 を 3 で割った値、すなわち '30' を使用して、画像を角と辺の領域に分割します。 repeat の値は round であり、マスクのスライスが均等に、すなわち切り取られたり隙間ができたりすることなく合わせられます。

• mask-border-mode
• mask-border-outset
• mask-border-repeat
• mask-border-source
• mask-border-width