以编程方式软化颜色边框，可能使用渐变答案

【问题标题】：Soften a colour border, maybe with a gradient, programmatically以编程方式软化颜色边框，可能使用渐变
【发布时间】：2010-05-12 23:09:29
【问题描述】：

我有一个公司颜色的窄页眉，鲜红色，下面的内容是在白色背景上。我尝试使用具有中间背景的边框类型 div 来柔化这些颜色相遇的长线，但我认为我需要原始类型的弯曲渐变“区域过渡”。我想在这里减少红色和白色之间的对比度，使用红白渐变，但使用“弯曲”渐变，而不是线性渐变。

途中图片：

我可以从他们的网站复制 1024 像素宽且太窄（垂直）的标题 gif，然后将其分割成八个边框图像，但这看起来很笨拙，我正在寻找可以在任何地方应用的东西，无需图像。我可以在 x-y 平面上做圆形边框，但我很好奇如何将渐变应用于任何选定的颜色过渡。

当我在为一个有边框的元素制作多个 div 时，出现了我在“#top-section”上方和下方用作边框元素的额外 div。这似乎是边框操作的终极，无代码，但在 CSS 中规范并为每个有边框的元素布置新边框非常乏味。

HTML：

<div id="topsection">
    <div style="float: right; width: 300px; padding-right: 5px;">
        <div style="font-size: small; text-align: right;">
            Provantage Media Management System</div>
        <div style="font-size: x-small; text-align: right;">
            <asp:LoginStatus ID="loginStatus" runat="server" 
            LoginText="Log in" LogoutText="Log out" />
        </div>
    </div>
    <span style="padding-left: 15px;">Main Menu</span><span id="content-title">
        <asp:ContentPlaceHolder ID="titlePlaceHolder" runat="server">
        </asp:ContentPlaceHolder>
    </span>
    <div style="background-color: white; height: 2px;">
</div>
<div style="background-color: white; height: 3px;"></div>

还有 CSS：

#topsection
{
    background-color: #EB2728;
    color: white;
    height: 35px;
    font-size: large;
    font-weight: bold;
}

以及示例粗边框（图片未显示，可在http://thehashtable.com/?attachment_id=58 获得）：

alt text http://thehashtable.com/?attachment_id=58

【问题讨论】：

可以发个截图吗？很难看到发生了什么
我添加了一张图片。我想要做的是以编程方式使用渐变模糊红色和白色之间的边界，而不使用图像，用于矩形的所有八个“边”。
图片没有显示，所以我添加了一个链接。
链接似乎也是错误的（抱歉，您正在寻找不在这里的东西。）

标签： javascript css

【解决方案1】：

如果不使用图像，您生成渐变的选项非常有限 - 您还不能以任何可靠的方式“以编程方式使用渐变模糊红色和白色之间的边界，而不使用图像”，这将适用于您可能需要它的浏览器。

CSS-3 提供了渐变绘制功能，但只有最新的浏览器在一定程度上支持它们，而且我不相信它们中的任何一个都能为您提供 CSS-3 指定的全套选项。

对于一个稍微跨浏览器友好的解决方案，您可以使用 CSS 阴影来伪造渐变，如下所示：http://www.spookandpuff.com/examples/fakeGradientFill.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Fake gradient fill</title>
    <style type="text/css" media="screen">
      * {margin:0;padding:0;}
     body {margin:2em;padding:0;}
     #header,
     #content {
       background-color:#992916;
       color:#FFF;
       margin:0;
       padding:1em;
     }

     #content .liner {
       color:#222;
       padding:1em;
       background-color:#F4F4F4;
       box-shadow:0 0 1.5em #F4F4F4;
       -webkit-box-shadow:0 0 1.5em #F4F4F4;
       -moz-box-shadow:0 0 1.5em #F4F4F4;
     }
    </style>
</head>

<body>
  <div id="header">
    <h1>Header content</h1>
  </div>
  <div id="content">
    <div class="liner">
      <h2>Body content</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
</body>
</html>

这让您受制于浏览器的阴影绘制技术（您在我测试过的任何浏览器中都看不到平滑过渡）。 Firefox 3+、Safari 4+、Chrome 1+ 和一些更新版本的 Opera 支持此效果。

另一个不太支持的选项是使用边框图像：这允许您指定单个图像，然后浏览器根据您提供的坐标拉伸、重复和定位。 Firefox 3.1+、Safari 4+ 和 Chrome 支持此功能。设置边框图像的示例有点复杂 - 相反，请查看：http://www.css3.info/preview/border-image/

所以 - 不幸的是，这意味着您可能需要使用图像，或者将您的设计更改为更容易实现的东西。我还没有看到你的例子，但在我看来，这可能不值得麻烦！

祝你好运！

【讨论】：