css文字陰影和盒子陰影

2021-10-01 09:24:42 字數 1553 閱讀 1926

文字陰影:text-shadow(4個引數:水平陰影位置,垂直陰影位置,陰影模糊距離,陰影顏色)。

css**:

h1

html**:

頁面效果:

注意:text-shadow的引數顏色可以寫在前面也可以寫在後面,但是不能寫在中間,否則沒有效果。

h1

頁面效果:

text-shadow還支援樣式疊加:

h1

頁面效果:

注意:陰影的位置可以為負值,但是陰影的模糊距離不能為負值。

2. 盒子陰影:box-shadow(6個引數:水平陰影位置,垂直陰影位置,陰影模糊距離,陰影的尺寸,陰影顏色,內部陰影/外部陰影(預設))。

css**:

div

html**:

頁面效果:

現在的效果和text-shadow的效果一樣,我們來設定一下陰影的尺寸:

div

頁面效果:

陰影放大了,看看能不能設定負值:

div

頁面效果:

box-shadow的inset可以設定內部陰影(預設是outset(外部陰影)):

div

頁面效果:

box-shadow也可以實現樣式疊加:

div

頁面效果:

注意:在box-shadow中,只有陰影的位置,陰影尺寸大小可以為負值,模糊距離不能為負值,控制數值的型別的引數盡量寫在一起,否則樣式不會生效。

盒子陰影 文字陰影

css3中新增了盒子陰影,我們可以使用box shadow屬性為盒子新增陰影。語法 box shadow h shadow v shadow blur spread color inset 值 描述h shadow 必須。水平陰影的位置。允許負值。v shadow 必須。垂直陰影的位置。允許負值。b...

關於文字陰影和盒子陰影

在做一些專案時,會利用陰影來讓頁面變得更加優美,但這個東西,用得好就是錦上添花,用得不好那就是雪上加霜 今天主要寫寫關於它的用法。首先是文字陰影 text shadow h shadow v shadow blur color 其中 h shadow 必需,指水平陰影的位置,可以是負值,為負值時陰影...

盒子陰影與文字陰影

1.如何給盒子新增陰影 box shadow 水平偏移 垂直偏移 模糊度 陰影擴充套件 陰影顏色 內外陰影 2.注意點 2.1盒子的陰影分為內外陰影,預設情況下就是外陰影 2.2快速新增陰影只需要編寫三個引數即可 box shadow 水平偏移 垂直偏移 模糊度 預設情況下陰影的顏色和盒子內容的顏色...