Question

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

途中的图片：

我可以从他们的网站上复制1024px宽，太窄（垂直）的标题gif，并将其剪切为8个边框图像，但这看起来很笨拙，而且我正在寻找可以在任何地方应用的东西，不需要图像。我能够在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

Answer 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支持这种效果。

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

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

祝你好运！

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

1 个答案: