CSS3盒子陰影box shadow

2022-09-01 05:30:12 字數 1007 閱讀 9416

來自w3cschool的解釋

語法:box-shadow: h-shadow v-shadow blur spread color inset;值描述

h-shadow

必需。水平陰影的位置。允許負值。

v-shadow

必需。垂直陰影的位置。允許負值。

blur

可選。模糊距離。

spread

可選。陰影的尺寸。

color

可選。陰影的顏色。請參閱 css 顏色值。

inset

可選。將外部陰影 (outset) 改為內部陰影。

tip:右下陰影為正方向,前3個例子中,水平方向的陰影為10px,所以右側陰影一直有10px,而垂直方向陰影》0(正方向,下側有陰影),=0(垂直方向無陰影),<0(負方向,上側有陰影)。若垂直方向數值固定,水平方向變化也同理!

要想四邊都有陰影,水平垂直陰影大小設定為0,然後設定模糊距離和陰影尺寸!

水平陰影和垂直陰影是必須要的,不可缺少!

css3盒子相關樣式

1 css3的display屬性 inline 內聯 inline block 可以設定寬高的內聯 block 設定為塊 doctype html html lang en head meta charset utf 8 title css3盒子型別 title style inline 內聯,in...

CSS3文字陰影 盒子陰影

1 文字陰影text shadow text shadow 值1 值2 值3 值4 text shadow 10px 10px 4px pink 值1 水平方向位置,向右為正值 必須有,可以為負值 值2 垂直方向位置,向下為正值,必須有,可以為負值 值3 陰影的模糊程度,不支援負值 值4 顏色設定 ...

2015 12 13複習之CSS3盒子樣式

box sizing content box,border box 預設值是content box content box 內容大小不把border,padding包含在內 通俗的講就是,首先設定好了寬高分別為100px,再設定border和padding分別為1px,此時,容器總大小為104px,...