css3 box shadow使用記錄

2022-01-29 05:35:18 字數 903 閱讀 5712

1、box-shadow這個屬性有6個引數可設定,使用的時候比較少用,每次使用的時候都會忘記,故寫此文作記錄。

樣式:

1

/*1.新增此屬性新增陰影*/2

box-shadow: 0 0 10px 10px blue;3/*

box-shadow: h-shadow v-shadow blur spread color inset;*/4

/*三個引數:1.垂直距離 2.水平距離 3.模糊距離 4.陰影的尺寸 5.陰影顏色 6.將外部陰影 (outset) 改為內部陰影。

*/

全部**:

1

doctype html

>

2<

html

>

3<

head

>

4<

meta

charset

="utf-8"

>

5<

title

>

title

>

6<

style

type

="text/css"

>

7#box

21style

>

22head

>

23<

body

>

24<

div

id="box"

>

div>

25body

>

26html

>

view code

實現如下的效果圖:

CSS3 box shadow 陰影使用

css3 box shadow 內陰影與外陰影 1 box shadow具體使用方法,語法 e 換句說 物件選擇器 取值 投放方式 預設是外陰影 box shadow屬性至多有6個引數設定,他們分別取值 陰影型別 此引數是乙個可選值,如果不設值,其預設的投影方式是外陰影 如果取其唯一值 inset ...

CSS3 box shadow 陰影使用

css3 box shadow 內陰影與外陰影 1 box shadow具體使用方法,語法 e 換句說 物件選擇器 取值 投放方式 預設是外陰影 box shadow屬性至多有6個引數設定,他們分別取值 陰影型別 此引數是乙個可選值,如果不設值,其預設的投影方式是外陰影 如果取其唯一值 inset ...

CSS3 box shadow 陰影使用

ss3 box shadow 內陰影與外陰影 1 box shadow具體使用方法,語法 e 換句說 物件選擇器 取值 投放方式 預設是外陰影 box shadow屬性至多有6個引數設定,他們分別取值 陰影型別 此引數是乙個可選值,如果不設值,其預設的投影方式是外陰影 如果取其唯一值 inset 就...