css實現文字陰影,以及邊框陰影

2021-09-09 06:34:24 字數 1111 閱讀 7515

1、文字陰影(text-shadow: 1px 1px 1px lightgray)

text-shadow: 1px 1px 1px lightgray;

第乙個1px:是向x座標方向的偏移

第二個1px;是向y座標方向的偏移

第三個1px;是模糊距離

第四的引數:顏色

例:1、

靜夜思床前明月光

疑是地上霜

舉頭望明月

低頭思故鄉

效果:

此例中:background-image: linear-gradient(red,orange,yellow,yellowgreen,skyblue,pink);

這個是進行線性的漸變,漸變作為背景的使用,漸變有線性漸變和徑向漸變(radial-gradient)

animation:ma,e duration timing-function delay itera-count direction fill-mode;

name:動畫名

duration:動畫時間

tme-function:速度曲線(ease,ease-in.ease-out,linear,實際上可以寫成乙個貝塞爾曲線)

delay:動畫延遲

iteration-count:動畫次數

direction:動畫是否反向

fill-mode:是否保留最後一整動畫:如果保留值為forword 

使用到了動畫:動畫的css樣式:

@keyframes move

to進行背景的剪下:

-webkit-background-clip: text;

2、邊框陰影(box-shadow: 30px 30px 80px black)

box-shadow: 30px 30px 80px black;

第乙個引數:x方向上的偏移

第二個引數;y方向上的偏移

第三個引數:模糊距離

第四個引數:顏色

例:(兩個立方體的巢狀,用hover實現滑鼠放在立方體上進行旋轉,以及發出邊框的陰影效果)12

3456

圓角邊框 盒子陰影 文字陰影

border radius length 引數值可以為數值或百分比的形式 如果是正方形設定為乙個圓,把數值修改為高度或者寬度的一半即可,或者直接寫50 如果是矩形,設定為高度的一半即為圓角矩形 該屬性是乙個簡寫屬性,可以跟四個值,分別代表左上角 右上角 右下角 左下角 順時針 分開寫 border ...

css圓角邊框,盒子,文字陰影

boeder radius屬性用於設定元素的外邊框圓角。語法 border radius 20px 50 引數值可以為 數值或者百分比的形式。如果是正方形,想要設定為乙個圓,把數值修改為高度或者寬度的一半即可,或者直接寫為50 如果是個矩形,設定為高度的一半就可以做 該屬性是乙個簡寫屬性,可以跟四個...

圓角邊框 盒子陰影和文字陰影

border radius屬性用於設定元素餓外邊框圓角。語法 border radius length 寫乙個矩形的盒子,然後設定border radius 50 即可得到圓形。圓角矩形可以設定length屬性為高的一半 length部分引數可以為1個,2個,3個或4個,引數為乙個則修改四個角,引數...