CSS3給div或者文字添加陰影盒子陰影、文本陰影的使用

添加陰影效果以前只能使用圖片來實現了,現在的css3功能非常的強大了,今天我們就一起來看關于CSS3給div或者文字添加陰影(盒子陰影、文本陰影的使用)的方法,具體的例子如下所示.

CSS3定義了兩種陰影:盒子陰影和文本陰影。其中盒子陰影需要IE9及其更新版本,而文本陰影需要IE10及其更新版本。下面分別介紹兩種陰影的使用:

1,盒子陰影

(1)盒子陰影的屬性是 box-shadow


box-shadow:5px 5px 10px gray;

前兩個值分別表示陰影水平方向和垂直方向的偏移量。

第三個值表示模糊距離。最後一個值是陰影顔色。

(2)盒子陰影是可以隨著盒子形狀而自動變化的

CSS3給div或者文字添加陰影盒子陰影、文本陰影的使用


(3)如果盒子下面有內容的話,可以使用 rgba() 函數,將陰影顔色設置爲半透明的

CSS3給div或者文字添加陰影盒子陰影、文本陰影的使用


box-shadow:5px 5px 10px rgba(0,0,0,0.5);

(4)伸展範圍設置
在模糊距離後面還可以添加一個值,表示伸展範圍(spread)。用來增大模糊邊界之前的實心顔色面積。

下面昨天是未設置伸展範圍,右圖設置了:

CSS3給div或者文字添加陰影盒子陰影、文本陰影的使用


box-shadow:5px 5px 10px 5px gray;

(5)在顔色後面加上 inset 用來創建內部陰影

CSS3給div或者文字添加陰影盒子陰影、文本陰影的使用


box-shadow:5px 5px 10px gray inset;

2,文本陰影

文本陰影的屬性是 text-shadow。其值順序與盒子陰影有所不同,先要指定顔色,接著才是水平和垂直偏移量,最後是模糊值。
CSS3給div或者文字添加陰影盒子陰影、文本陰影的使用


text-shadow: gray 10px 10px 7px;

更多相關文章
  • array imagettftext ( resource image, int size, int angle, int x, int y, int color, string fontfile, string text)imagettftext() 將字符串 text 畫到 image 所代表的
  • php教程給fck文件管理器添加查看.修改.刪除文件功能olistmanager.getfolderrowhtml = function( foldername, folderpath ){ // build the link to view the folder. var slink = '< ...
  • HTML5中給video視頻添加字幕WebVTT
    下文爲各位介紹一篇關于HTML5中給video視頻添加字幕(WebVTT),希望文章能夠讓各位了解到HTML5中給video視頻添加字幕的方法.雖然HTML5正式標准沒有指定使用哪種格式的字幕.但目前比較通用是WebVTT(後綴.vtt),這個各個浏覽器廠商都支持的比較好.1,WebVTT文件樣例W ...
  • Swift給圖片imageView添加陰影邊框效果代碼
    Swift是可以運行在蘋果ios平台了,可與Objective-C*共同運行于Mac OS和iOS平台,用于搭建基于蘋果平台的應用程序.有時爲了突出圖片,需要給圖片添加陰影效果.通過UIImageView的layer陰影屬性設置,可以很方便的實現這個功能.不僅是UIImageView,其他的UI控件
  • ECSHOP後台商品簡單描述爲文本了,下面因爲工作需我要把它改成fck編輯器了,下面就和小編一起來看看吧.修改方法首先來修改 /admin/includes/lib_main.php 文件將function create_html_editor($input_name, $input_value = ...
  • 今天在做一個抽獎活動時小編要做一個抽獎沒有中獎之後直接彈出一個提示,然後再給div添加一個事件了,下面我們來看這個例子的做法.html<a href="javascript:void(0);" id="click_ms" ><img src= ...
  • css讓文字不超過div的固定width和height
    也許你的文字內容經常溢出你固定高度和寬度的div,現在我們來告訴你一個css小技巧,就能通
  • CSS3中利用Flexbox實現DIV標簽元素垂直居中
    對于很多的前端我們都不知道Flexbox是什麽用處了,如果你對于Flexbox不了解我們下
一周排行