How to realize Block Shadow and text Shadow in css

Editor to share with you how to achieve css block shadow and text shadow, I believe that most people do not understand, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

Block Shadow and text Shadow

Shadow effects used to be loved and hated by Web designers. Now, with CSS3, you no longer need Photoshop. Websites already use this feature, such as 24 Ways website.

-webkit-box-shadow: 10px 10px 25px # ccc;-moz-box-shadow: 10px 10px 25px # ccc; box-shadow: 10px 10px 25px # ccc

The first two properties set the X / Y displacement of the shadow, here is 10px, the third property defines the virtual degree of the shadow, and the last one sets the color of the shadow. Text shadows can also be set like this:

Text-shadow: 2px 2px 5px # ccc

Supported browsers: Firefox 3.1, Safari, Chrome (only Box shadows), Opera (text shadows only). The first three numbers represent the values of red, green and blue, and the last value represents transparency. In addition, we can also use opacity to achieve transparency.

The above is all the content of the article "how to achieve Block Shadow and text Shadow in css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!