首頁  >  文章  >  web前端  >  關於CSS3陰影使用方法介紹

關於CSS3陰影使用方法介紹

高洛峰
高洛峰原創
2017-03-23 10:29:451562瀏覽

一、邊框陰影

標準語法:

box-shadow : h-offset  v-offset  blur  spread  color [   inset ] ,... 

[ 偏移量向右下為正值,左上為負值 ]

a、若有多重陰影,用逗號分隔,且依序往下疊加,最先寫的在最上面

b、若有inset,則為內側陰影,但要注意:如果只是簡單的在原來陰影上加inset,則陰影在相反一側內部,並非簡單翻轉反向。

c、擴展spread最大的好處和作用是當取負值時屏蔽或減少對其餘3邊的干擾

d、如果元素內部DIV填充有顏色,則內側陰影會被有顏色的部分遮蔽,但可將內部有顏色的DIV設定為relative並將z-index設為-1即可顯示被遮蔽的內側陰影。

[這種情況較少,而且有諸多限制]

二、文字陰影

#標準語法:

text-shadow : h-offset v-offset   blur   color ,...

[ 偏移量向右下為正值,左上為負值 ]

a、若有多重陰影,用逗號分隔,且依次往下疊加,最早寫的在最上面

效果二:Apple Style Effect

.demo4 {  color: #000;
  text-shadow: 0 1px 1px #ff#fff; }

效果三:Photoshop Emboss Effect

.demo5 {  color: #ccc;
  text-shadow: -1px -1px 0# #fff,1px 1px 01p131px 0 #444;}

效果四:Blurytext Effect

.demo6 {  color: transparent;
  text-shadow: 0 0 5px #f96;}

;七:3D text effect

.demo10 {  color: #fff;
  text-shadow: 1px 1px rgba(197, 223, 248,0.8px rgba(197, 223, 248,0.8),2px235, ),3px 3px rgba(197, 223,

以上是關於CSS3陰影使用方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn