网页顶部阴影边框效果

最新推荐文章于 2022-07-24 16:04:26 发布

原创最新推荐文章于 2022-07-24 16:04:26 发布 · 280 阅读

0 ·

CC 4.0 BY-SA版权

分享一段代码实例，它实现了网页顶部阴影边框效果。

当然美不美观另当别论，每一个人的审美观是不同的，这里主要学习一下相关属性的用法。

代码实例如下:

[HTML] 纯文本查看复制代码运行代码

<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">body:before { content: ""; position: fixed; top: -10px; left: 0; width: 100%; height: 10px; box-shadow: 0px 0px 10px rgba(0,0,0,.8); z-index: 100;}</style></head><body></body></html>