ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS だけを使用してこの効果を実現できますか? help me_html/css_WEB-ITnose
CSS だけを使用してこの効果を実現できますか? help me_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:32:04938ブラウズ
N 枚の画像をフレームに挿入し、スクロール バーをドラッグすると、画像をクリックすると、影などを含む丸いフレームの効果が得られます。今日自習ビデオを見たときのビデオの先生。 。 。長い間考えましたが、どうすればよいか分からなかったので、神様に助けを求めました。 。 。この効果は CSS だけを使用して実現できますか? ?
ディスカッションへの返信(解決策)
誰か知っていますか。 。 ? ? ?助けてください
本当に最初のエピソードから見始めましたか
<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title> 页面名称 </title><style type="text/css">#box { width: 600px; height: 200px; overflow: scroll; white-space: nowrap;}#box img { margin: 5px; border: 3px solid transparent; border-radius: 10px;}#box img:hover { border: 3px solid #FF9900; box-shadow: 0px 0px 10px #482915;}#box img:active { border: 3px solid #FF3333; box-shadow: 0px 0px 10px #ff9900;}</style></head><div id="box"><img src="http://avatar.csdn.net/4/F/7/1_wgf577.jpg" /><img src="http://avatar.csdn.net/4/F/7/1_wgf577.jpg" /><img src="http://avatar.csdn.net/4/F/7/1_wgf577.jpg" /><img src="http://avatar.csdn.net/4/F/7/1_wgf577.jpg" /><img src="http://avatar.csdn.net/4/F/7/1_wgf577.jpg" /></div></body></html> ありがとう、理解できました
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。