Css 自定义滚动条属性二例

发布时间：2018-09-25 15:30:39 所属栏目：专访来源：站长网

导读：一。用CSS自定义滚动条属性。实际上从代码里你并没有发现有滚动条，但是最终的效果却出现了滚动条，它可以根据框内内容的多少自动适应，细心的朋友会发现，这其实是在CSS里定义了一个 overflow:scroll属性。演示： !DOCTYPE html PUBLIC -//W3C//DTD XHT

　　一。用CSS自定义滚动条属性。

　　实际上从代码里你并没有发现有滚动条，但是最终的效果却出现了滚动条，它可以根据框内内容的多少自动适应，细心的朋友会发现，这其实是在CSS里定义了一个 overflow:scroll属性。

　　演示：

<!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> <title>css自定义滚动条属性</title> <style> html { scrollbar-3dlight-color:#000000; } div { height:100px; width:400px; padding:100px 0 0 0; border:1px solid #666666; overflow:scroll; } </style> </head> <body> <div>这里是元素内容部分<br />这里是元素内容部分<br />这里是元素内容部分<br />这里是元素内容部分<br />这里是元素内容部分<br /></div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

　　二。CSS修饰一个立体感更强的滚动条。

　　有时候你发现别人网页的滚动条非常漂亮，那是怎么做的呢？或许你通过这个简短的示例代码能找到答案，如果你喜欢这种风格，你可以使用本例子任意定义你网页上的滚动条，即使在没有滚动条的地方，你也可强制安放一个滚动条效果。

　　演示：

<!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属性实例</title> <style> div { scrollbar-shadow-color:#000000; height:100px; width:400px; padding:100px 0 0 0; border:1px solid #666666; overflow:scroll; } </style> </head> <body> <div>以提供计算机知识、网站运营、软件应用、设计教程、编程开发与IT资讯等为主要宗旨，同时有源码下载、站长工具、在线手册、免费资源等内容，是国内快捷易懂、内容丰富的网上学习网站<br />这里是元素内容部分<br />这里是元素内容部分<br /></div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：威海站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!