CSS控制DIV层滚动效果 CSS层滚动条效果

最新推荐文章于 2025-06-20 13:08:49 发布

原创最新推荐文章于 2025-06-20 13:08:49 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #div #filter #border #xhtml #html

DW5 + CSS 专栏收录该内容

6 篇文章

订阅专栏

本文提供了一段HTML和CSS代码示例，展示了如何为特定的HTML容器（如DIV）添加自定义滚动条样式，并设置了鼠标悬停图片时的显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接列出代码如下，有需要的自己去参考，可以控制任意 html 容器标签。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS控制DIV层滚动效果 CSS层滚动条效果</title>
</head>
<style type="text/css">
<!--
ul {
	border: 3px double #999;
	height: 300px;
	width: 200px;
	overflow: auto;
	overflow-x: hidden;
	padding: 2px;
	scrollbar-3dlight-color:#cccccc;
	scrollbar-arrow-color:#ffffff; 
	scrollbar-base-color:#cccccc; 
	scrollbar-darkshadow-color:#cccccc; 
	scrollbar-face-color:#ccc; 
	scrollbar-highlight-color:#ffffff; 
	scrollbar-shadow-color:#ffffff;		
}
li {
	list-style-type: none;
}
li a img {
	filter: Alpha(Opacity=70);
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	width:180px;
	height:50px;
	padding: 2px;	
}
li a:hover img {
	filter: Alpha(Opacity=100);
	border: 1px solid #666666;
	padding: 1px;
}
-->
</style>


<body>
<ul>
  <li><a href="http://www.songyanjun.net" target="_blank"><img src="images/01.jpg"></a></li>
  <li><a href="http://www.songyanjun.net" target="_blank"><img src="images/02.jpg"></a></li>
  <li><a href="http://www.songyanjun.net" target="_blank"><img src="images/03.jpg"></a></li>
  <li><a href="http://www.songyanjun.net" target="_blank"><img src="images/04.jpg"></a></li>
  <li><a href="http://www.songyanjun.net" target="_blank"><img src="images/05.jpg"></a></li>
  <li><a href="http://www.songyanjun.net" target="_blank"><img src="images/06.jpg"></a></li>
  <li><a href="http://www.songyanjun.net" target="_blank"><img src="images/07.jpg"></a></li>
  <li><a href="http://www.songyanjun.net" target="_blank"><img src="images/08.jpg"></a></li>
  <li><a href="http://www.songyanjun.net" target="_blank"><img src="images/09.jpg"></a></li>
  <li><a href="http://www.songyanjun.net" target="_blank"><img src="images/10.jpg"></a></li>              
</ul>
</body>
</html>
<body>
</body>
</html>

以上代码即可以实现带有滚动条的层或标签容器，不在做解释。这个玩意不难，基础的东西，看看就能明白。