ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS影効果の実装_html/css_WEB-ITnose
CSS影効果の実装_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:58:292450ブラウズ
この種の画像の影をコーディングするにはどうすればよいですか?
ディスカッションへの返信（解決策）
http://www.w3school.com.cn/css3/css3_border.asp
これは左上の影のある小さな部分ですが、、、本当に書き込めません はい
<!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> Google で実行しましたが、大丈夫です。他のブラウザで実行したい場合は、IE9 用のスタイルを変更できます。 div1に背景画像を追加すればほぼ完成です。
文章は少し荒いですが、変更しても大丈夫です！
ありがとう笑
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。