1

因此，我正在为我所属的俱乐部构建布局，无论如何，我使用的布局具有边框沿整个页面的一侧延伸的效果，但使用顶部和底部附近的渐变进行篡改。这是布局 - 我指的是页面左侧的软阴影： https ://dl.dropbox.com/u/6809301/sogawebsite.jpg

我通常认为自己对 html/css 相当精通，但我真的很难完成这项工作。如果没有在父容器上明确指定高度，我无法在主体展开时拉伸边框。使用边边框渐变，我们真的有 3 个部分 - 需要停靠到容器顶部的顶部，停靠到页面底部的底部 - 两者都可以设为静态高度，中间保持纯色但需要根据页面高度进行拉伸。

任何帮助都会被挪用。我一直觉得基于高度的缩放在 html 中有些尴尬。

4

2 回答 2

1

一种可能的选择是使用具有 100% 高度和CSS 渐变作为生成伪元素的背景的绝对定位的生成内容（:before用于左侧“边框”和右侧）。对于 IE9 及更低版本，可以使用常规单色边框作为后备。:after

有关工作示例，请参见现场演示。

于 2012-10-14T18:36:43.940 回答
1

明智的做法是使用渐变边框，特别是border-image。浏览器支持并不完美，但由于这是一个非常非必要的效果，所以稍微优雅的降级不会对全面提高性能造成伤害。

这是一个小演示。

我使用了 SASS（带有 Compass），它将编译成 CSS（缩小！）并为您处理供应商前缀：

div  
  border-width: 3px
  +border-image(linear-gradient(top, rgba(0,0,0,0), black, black, rgba(0,0,0,0)) 1 100%)

但是，如果你是一个受虐狂，你可以手动完成 CSS：

div {
border-width: 3px;
-moz-border-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), #000000, #000000, rgba(0, 0, 0, 0)) 1 100%;
-webkit-border-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(33.33333%, #000000), color-stop(66.66667%, #000000), color-stop(100%, rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000, #000000, rgba(0, 0, 0, 0)) 1 100%;
-o-border-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000, #000000, rgba(0, 0, 0, 0)) 1 100%;
border-image: linear-gradient(top, rgba(0, 0, 0, 0), #000000, #000000, rgba(0, 0, 0, 0)) 1 100%;}

如果这对您不起作用，请查看有关 CSS 技巧的其他一些技术，或使用图像。

于 2012-10-14T18:37:46.510 回答