- HTML5 Web Application Development By Example Beginner's Guide
- J.M. Gustafson
- 279字
- 2021-08-13 16:50:23
Shadows
Adding shadows to elements and text is simple in CSS3. Use shadows to make certain elements really stand out and give a more natural look to your UI. There are many options for adding shadows, such as size, position, and color. Shadows don't always have to be behind elements and text; they can frame, highlight, and add effects to them too.
Box shadows
In addition to rounded corners, you can add shadows to elements using the new CSS3 box-shadow
property. The box-shadow
property takes a number of parameters that tells it how to draw the shadow:
box-shadow: h-offset v-offset blur-radius spread-radius color;
Here is an explanation of the parameters:
h-offset
: The horizontal offset of the shadow. Negative values put the shadow to the left of the element.v-offset
: The vertical offset of the shadow. Negative values put the shadow above the element.blur-radius
: Determines the blur amount; the higher the number, the more blur (optional).spread-radius
: The size of the shadow. If zero, it's the same size as the blur (optional).color
: The color of the shadow (optional).inset
: Addinset
to change shadow from outer to inner (optional).
Note
You can produce some interesting effects other than shadows with the box-shadow
property. You can give an element an inner or outer glow by setting the offset
values to zero and adjusting the blur and spread (see the previous two examples).

Text shadows
In addition to box shadows, CSS3 has support for text shadows using the text-shadow
property. It works nearly identically to box-shadow
and uses almost all the same parameters:
text-shadow: h-offset v-offset blur-radius color;
Like box-shadow
, you can produce some interesting effects, such as glowing text:

- Beginning Java Data Structures and Algorithms
- Scratch 3.0少兒編程與邏輯思維訓練
- Cocos2d-x學習筆記:完全掌握Lua API與游戲項目開發 (未來書庫)
- Elasticsearch Server(Third Edition)
- 數據結構案例教程(C/C++版)
- C語言程序設計上機指導與習題解答(第2版)
- 學習OpenCV 4:基于Python的算法實戰
- 軟件測試教程
- Web程序設計:ASP.NET(第2版)
- 從零開始學UI:概念解析、實戰提高、突破規則
- 從零開始:C語言快速入門教程
- Android高級開發實戰:UI、NDK與安全
- HTML5與CSS3權威指南
- Java程序設計(項目教學版)
- Swift從入門到精通 (移動開發叢書)