Community Learn Tools Library Leisure

English

Home > Web Front-end > HTML Tutorial > Implementation of css shadow effect_html/css_WEB-ITnose

Implementation of css shadow effect_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:58:29

Original

2465 people have browsed it

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>

Copy after login

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

Related labels：

css Effect shadow

source：php.cn

Previous article：Color value of image_html/css_WEB-ITnose Next article：HTML5 plays MP4 format video but does not display_html/css_WEB-ITnose

Statement of this Website

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