Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Box-shadow not working on Webkit?

Tags:

css

I'm creating multiple borders to element using box-shadow, but they don't show at Webkit. What's wrong with this code? I'm using this four times to create shadow on each side, then border for extra border

box-shadow: 1px 1px 0px rgba(0,0,0,0.1);

Martti Laine

like image 766
Martti Laine Avatar asked Mar 31 '10 13:03

Martti Laine


People also ask

What is webkit box shadow?

The webkit-box-shadow is a browser-specific implementation for WebKit browsers like Google Chrome and Safari. Syntax: webkit-box-shadow: h-offset v-offset blur; Advantage: If we use -webkit-box-shadow the old versions of browsers support it.

How to add shadow to text in CSS?

CSS Syntaxtext-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit; Note: To add more than one shadow to the text, add a comma-separated list of shadows.


1 Answers

to display box-shadow in webkit browsers you have to use the following statement at the moment:

-webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1);

To make it compatible with most modern browsers use this:

-webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 1px 1px 0px rgba(0,0,0,0.1);
box-shadow: 1px 1px 0px rgba(0,0,0,0.1);
like image 172
stefanglase Avatar answered Sep 28 '22 01:09

stefanglase