收集的一些样式：滚动条和弹出层

最新推荐文章于 2021-06-07 12:23:06 发布

iteye_18719

最新推荐文章于 2021-06-07 12:23:06 发布

阅读量173

点赞数

CC 4.0 BY-SA版权

分类专栏： web 文章标签： css css 滚动条 css 弹出层 css对话框

本文链接：https://blog.youkuaiyun.com/iteye_18719/article/details/82377241

web 专栏收录该内容

10 篇文章

订阅专栏

本文深入探讨了如何利用CSS来自定义网页滚动条样式，并阐述了采用弹出层替代传统dialog的优势。通过展示具体代码示例，包括滚动条样式设置与弹出层实现细节，旨在提升网页的用户体验与交互效果。

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

css滚动条

div.scrollbar{
	BORDER-RIGHT: 1px solid; 
	BORDER-TOP: 1px solid;
	SCROLLBAR-FACE-COLOR: #ffa500; 
	OVERFLOW: scroll; 
	BORDER-LEFT: 1px solid;
	SCROLLBAR-SHADOW-COLOR: #000000; 
	COLOR: #CCCCCC;; 
	SCROLLBAR-ARROW-COLOR: #ff0000; 
	BORDER-BOTTOM: 1px solid; 
	SCROLLBAR-DARKSHADOW-COLOR: #000000; 
}

css弹出层

使用弹出层代替dialog会有很多优点，
1、弹出层的子树仍然是当前DOM结构的一部分，它在DOM树中位置没有改变。而dialog插件通常会改变当前DOM树的结构，从而导致DOM选择出现问题。
2、dialog定制起来不如弹出层，比如改变样式、增加其他元素等。

div.divDialog{
	display:none;
	position:fixed;
	border:solid 1px gray;		
	background-color:white;
	top:40%;
	left:50%;
	margin-left:-150px;
	margin-top:-150px;
	padding:10px;
	line-height:21px;
	border-radius:8px;
	-moz-border-radius:8px;
	box-shadow:0 5px 15px rgba(0,0,0,0.3);
	-webkit-box-shadow:0 5px 15px rgba(0,0,0,0.3);
	-moz-box-shadow:0 5px 15px rgba(0,0,0,0.3);
	_position:absolute;
	_display:block;
	_left:-10000px;
	z-index:10000;
}