Home > Article > Web Front-end > Implementation of css shadow effect_html/css_WEB-ITnose
Implementation of css shadow effect_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:58:292417browse
How to code the shadow of this kind of picture?
Reply to discussion (solution)
http://www.w3school.com.cn/css3/css3_border.asp
There is a shadow in a small part of the upper left corner. I really can’t write it.
<!DOCTYPE html><html><head><style> .div1{background-color:yellow;width:200px;height:100px;margin-top:-44px;margin-left:96px;position: absolute;}.div2{background-color:red;width:40px;height:40px;box-shadow:-5px -5px 10px black;transform: skew(30deg,20deg);-ms-transform: skew(30deg,20deg); /* IE 9 */-webkit-transform: skew(5deg,5deg); /* Safari and Chrome */margin-top:100px;margin-left:100px;}</style></head><body><div class="div2"></div><div class="div1"></div></body></html> I run it on Google. It’s okay. If you want to run it in other browsers, you can change the style. There is one for IE9. It should be almost done if you add a background image to div1.
The writing is a bit rough, you can change it!
Thank you Haha
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Color value of image_html/css_WEB-ITnoseNext article：Color value of image_html/css_WEB-ITnose