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

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

javascript css

Javascript 以编程方式软化颜色边框，可能使用渐变,javascript,css,Javascript,Css,我有一个公司颜色的窄标题，明亮的红色，下面的内容在一个刚刚淡白的背景上。我试着用中间背景的边框型div来软化这些颜色相交的长线，但我想我需要原始类型的曲线渐变“区域过渡”。我想在这里减少红色和白色之间的对比度，使用红白渐变，但使用“曲线”渐变，而不是线性渐变途中的图像：我可以从他们的网站上复制1024px宽、太窄（垂直）的标题gif，并将其切碎为八个边框图像，但这似乎很笨拙，我正在寻找可以在任何地方应用的东西，而不需要图像。我可以在x-y平面上做圆形边框，但我很好奇如何将渐变应用于任何选择的

我有一个公司颜色的窄标题，明亮的红色，下面的内容在一个刚刚淡白的背景上。我试着用中间背景的边框型div来软化这些颜色相交的长线，但我想我需要原始类型的曲线渐变“区域过渡”。我想在这里减少红色和白色之间的对比度，使用红白渐变，但使用“曲线”渐变，而不是线性渐变

途中的图像：

我可以从他们的网站上复制1024px宽、太窄（垂直）的标题gif，并将其切碎为八个边框图像，但这似乎很笨拙，我正在寻找可以在任何地方应用的东西，而不需要图像。我可以在x-y平面上做圆形边框，但我很好奇如何将渐变应用于任何选择的颜色过渡

我在“#top section”上方和下方用作边框元素的额外div是在我尝试为一个边框元素制作多个div时出现的。这似乎是边界操作的终极，无代码，但在CSS中进行规范并为每个有边界的元素设置新边界非常繁琐

HTML:

以及粗糙边界示例（未显示图像，可从以下网址获得）：

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

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

对于跨浏览器友好的解决方案，您可以使用CSS阴影模拟渐变，如下所示：


伪梯度填充
*{边距：0；填充：0；}
正文{margin:2em；padding:0；}
#标题，
#内容{
背景色：#992916；
颜色：#FFF；
保证金：0；
填充：1em；
}
#班轮{
颜色：#222；
填充：1em；
背景色：#F4；
盒影：0.01.5em#f4；
-webkit盒阴影：0 1.5em#f4；
-莫兹盒阴影：0 0 1.5em#f4；
}
标题内容
身体内容
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

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

另一个同样不受支持的选项是使用边框图像：这允许您指定单个图像，然后浏览器根据您提供的坐标拉伸、重复和定位该图像。Firefox 3.1+、Safari 4+和Chrome都支持这一点。边界图像的示例更需要设置-相反，请查看：

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

祝你好运

你能发布一个截图吗？很难看到发生了什么我添加了一个图像。我想做的是，在不使用图像的情况下，通过编程为矩形的所有八个“边”使用渐变来模糊红色和白色之间的边界。图像没有显示，因此我包含了一个指向它的链接。该链接似乎也错了（抱歉，但您正在查找此处没有的内容。）

<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>

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

<!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>