關於文字陰影和盒子陰影

2021-10-23 08:39:15 字數 855 閱讀 7013

在做一些專案時,會利用陰影來讓頁面變得更加優美,但這個東西,用得好就是錦上添花,用得不好那就是雪上加霜;今天主要寫寫關於它的用法。

首先是文字陰影:text-shadow: h-shadow v-shadow blur color;

其中:h-shadow: 必需,指水平陰影的位置,可以是負值,為負值時陰影是向左移動;

v-shadow: 必需,指垂直陰影的位置,可以是負值,為負值時陰影是向上移動;

blur: 可選,模糊的距離

color: 可選,陰影的顏色

乙個元素的樣式屬性text-shadow可以設定多組陰影值,多組陰影值之間使用逗號分隔。

我們來寫了小例子吧,話不多說上**:

div

效果圖:

哈哈看自己想要的效果和審美了,我就覺得這樣就好看了。

接下來我覺得用得較多的還是盒子陰影了:box-shadow: x y blur spread color;

其中:x: 水平陰影,可為負值,為負值時是向左移動陰影;

y: 垂直陰影,可為賦值,為負值時是向上移動陰影;

blur: 模糊距離,根據自己需求設定;

spread: 陰影大小;

color: 陰影顏色。

上**:

div

盒子陰影 文字陰影

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

css文字陰影和盒子陰影

文字陰影 text shadow 4個引數 水平陰影位置,垂直陰影位置,陰影模糊距離,陰影顏色 css h1 html 頁面效果 注意 text shadow的引數顏色可以寫在前面也可以寫在後面,但是不能寫在中間,否則沒有效果。h1 頁面效果 text shadow還支援樣式疊加 h1 頁面效果 注...

盒子陰影與文字陰影

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