Skip to Content
JAVASCRIPT網頁應用程式設計
book

JAVASCRIPT網頁應用程式設計

by Alex MacCaw
January 2013
Intermediate to advanced
332 pages
5h 23m
Chinese
GoTop Information, Inc.
Content preview from JAVASCRIPT網頁應用程式設計
276
|
附錄 C
文字的陰影效果
CSS3 問世之前,如果要替文字加上陰影效果,唯一的方法就是把文字改成圖檔(頗
拙劣的做法)。但現在有了 CSS3
text-shadow
樣式,只要傳入水平位移距離、垂直位
移距離、模糊半徑(非必要設定值),以及顏色,就可以實作出文字的陰影效果了:
// 水平位移距離、垂直位移距離、顏色
text-shadow: 1px 1px #FFF;
// 水平位移距離、垂直位移距離、模糊半徑、顏色
text-shadow: 1px 1px .3em rgba(255, 255, 255, .8);
text-shadow
box-shadow
兩者間的差異,在於
text-shadow
沒有提供擴散距離和 inset
這兩項設定值。不過人類的眼睛蠻好騙的,透過一些小技巧,就能讓眼睛認為文字陰影
是內陰影或外陰影:如果讓陰影出現在比文字高的地方(將垂直位移距離設定為負值),
就會呈現內陰影的效果。同理,如果讓陰影出現在比文字低的位置,就會呈現外陰影的
效果。
目前各家瀏覽器的支援情形:
Firefox:完整支援
Chrome:完整支援
Safari:完整支援
IE:不支援
Opera:完整支援
漸層效果(Gradients
在以前 CSS 尚未支援漸層效果時,如果要做出漸層效果,就得先用影像處理軟體編輯好
一張固定寬度或高度的圖片,再把它設定成會不斷重複顯示的背景圖片。
有鑑於此,CSS3 新增了直線式漸層(linear gradients)和放射狀漸層(
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

AirBnbBlueOriginElectronic ArtsHomeDepotNasdaqRakutenTata Consultancy Services

QuotationMarkO’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.
Julian F.
Head of Cybersecurity
QuotationMarkI wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.
Addison B.
Field Engineer
QuotationMarkI’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.
Amir M.
Data Platform Tech Lead
QuotationMarkI'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
Mark W.
Embedded Software Engineer

You might also like

初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発

初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発

Ethan Brown, 武舎 広幸, 武舎 るみ
PHP编程:第4版

PHP编程:第4版

Kevin Tatroe, Peter MacIntyre
Strange Code

Strange Code

Ronald T. Kneusel
Perfecting Your Thinking Skills

Perfecting Your Thinking Skills

MIT Sloan Management Review

Publisher Resources

ISBN: 9789862766811