首页从内向外的立体灰白边框

从内向外的立体灰白边框

时间: 2024-11-09 20:24:20 浏览: 23

如果你想要在HTML元素上添加一个从内向外的立体灰白边框，可以借助CSS的box-shadow属性结合z-index和伪元素技术来实现。下面是一个基本的示例，假设我们有一个灰色的矩形盒子，它会有一个从内向外逐渐变淡的效果： ```html <!DOCTYPE html> <html> <head> <style> .box-with-shadow { width: 200px; height: 100px; background-color: #ccc; /* 灰色背景 */ position: relative; overflow: hidden; /* 隐藏超出的内容，使内部阴影可见 */ } /* 使用伪元素创建内边框 */ .box-with-shadow::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); z-index: -1; /* 将其放在真实内容下方 */ box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2); /* 灰色内阴影 */ } /* 实际内容区域 */ .box-with-shadow { box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); /* 薄薄的外层阴影 */ } </style> </head> <body> <div class="box-with-shadow"></div> </body> </html> ``` 在这个例子中，`.box-with-shadow::before` 伪元素创建了一个从内到外的渐变效果，而`.box-with-shadow` 则添加了较浅的外层阴影。你可以调整阴影的颜色、大小和方向以满足需求。

阅读全文