Box-shadow հատկությունը

box-shadow հատկությունը ստվեր է ավելացնում բլոկին: Որպես արժեք հատկությունը ընդունում է 6 պարամետրեր, որոնք թվարկվում են բացատով անջատված, կամ none բանալի բառը, որն ամբողջությամբ հանում է ստվերը:

Շարահյուսություն

cssընտրիչ {
  box-shadow: inset x_առանցքի_տեղաշարժ y_առանցքի_տեղաշարժ տարածում ստվերի_չափ գույն;
}

cssընտրիչ {
  box-shadow: none;
}

Պարամետրեր

Առանցքների երկայնքով տեղաշարժերը, տարածումը և ստվերի չափը նշվում են ցանկացած չափի միավորով, բացառությամբ տոկոսների:

Օրինակ

Այս օրինակում ստվերը տեղաշարժված է ներքև և աջ և ավելացված է փոքր տարածում:

html<div id="elem"></div>

css#elem {
  box-shadow: 5px 5px 3px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

Օրինակ : Հստակ ստվեր

Այս օրինակում ստվերը տեղաշարժված է ներքև և աջ, բայց տարածում չկա (ստվերը կլինի հստակ):

html<div id="elem"></div>

css#elem {
  box-shadow: 2px 2px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

Օրինակ : Միատեսակ ստվեր

Այս օրինակում ստվերը չի տեղաշարժված, բայց դրան ավելացված է տարածում:

html<div id="elem"></div>

css#elem {
  box-shadow: 0px 0px 3px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

Օրինակ : Ստվերի չափ

Այս օրինակում ստվերը չի տեղաշարժված, տարածումը հավասար է զրոյի, բայց դրան ավելացված է չափ (սևը շերմանակն է, կարմիրը՝ ստվերը):

html<div id="elem"></div>

css#elem {
  box-shadow: 0 0 0 3px red;
  border: 3px solid black;
  width: 300px;
  height: 50px;
}

Результат:

Օրինակ : Տարածում + ստվերի չափ

Այս օրինակում ստվերը չի տեղաշարժված, բայց դրան ավելացված են տարածում և չափ (սևը շերմանակն է, կարմիրը՝ ստվերը):

html<div id="elem"></div>

css#elem {
  box-shadow: 0 0 3px 3px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

Օրինակ : Ներքին ստվեր

Այս օրինակում ստվերը գտնվում է կոնտեյների ներսում:

html<div id="elem"></div>

css#elem {
  box-shadow: inset 0 0 6px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

Տես նաև