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不了解我們下
一周排行
  • session_cache_limiter() 返回當前緩存限制的名字. 如果指定了 cache_limiter, 當前的緩存限制的名字被改爲新值. 緩存限制控制著 HTTP 頭發送到客戶端的緩存控制. 這些確定頁面 ...
  • 可能有些朋友會碰到在apache啓動錯誤提示:httpd: Could not reliably determine the server 這個問題,其實不然解決辦法很簡單,下面我來給大家介紹介紹.錯誤提示在系統啓動
  • 有時候mysql沒有做好數據備份,或者被數據管理員誤刪,或者ibdata損壞了我們如何恢複呢?別怕,只要有部分frm.ibd存在,下面就是恢複教程.mysql存儲在磁盤中,各種天災人禍都會導致數據丟失.大公司的時候我 ...
  • css中position包括了relative(相對)與 absolute(絕對),但很多朋友都不清楚相對定位與絕對定位具體區別在哪裏,特別是相對于元素時更不會定義了,下面我給大家來介紹一下它們的用法與區別.定位標簽
  • RabbitMQ是一個消息隊列了,我們下文爲各位介紹RabbitMQ安裝配置使用細節,文章寫得不錯整理過來供各位參考,希望例子能夠對各位有幫助.RabbitMQ是一個由erlang開發的AMQP(Advanced M
  • 在戴爾Dell R620 伺服器中經常出現idrac無法連接的問題,本文我們來看看如何解決idrac無法連接.R620伺服器中,比較經常出現idrac無法連接,或者連接用戶數超限的問題,有幾個方法可以嘗試下:1. 升 ...
  • 蘋果商店怎麽退款 appstore內購退款流程
    蘋果商店怎麽退款? 在商城如果我們購買到不喜歡或錯誤的東西我們是可以申請退款的,那麽退款流
  • mod_deflate模塊提供了DEFLATE輸出過濾器,允許伺服器在將輸出內容發送到客戶端以前進行壓縮,以節約帶寬了,下面我們來介紹在linux中mod_deflate模塊安裝配置最近把博客從虛擬主機搬到 VPS
  • 明月生于何處?-海上,因爲海上升明月:是誰生了明月?-青天,因爲明月幾時有,把酒問青天:青天的老公是誰?-碧海,因爲碧海青天夜夜心!你夢想有所房子,不還房貸,面朝大海,能叫外賣,快遞直達,一堆朋友,哼哼小調,睡著舒適
  • 騰達FS395怎麽設置自動獲取IP上網DHCP
    其實設置dhcp上網我們使用的非常少使用最多的另一種方法,在此文章之後我會詳細介紹,在使用