2

是否可以使用css创建像流动图像一样的边框？任何提示将不胜感激

http://i.stack.imgur.com/rGwQ6.png

在此处输入图像描述

#sidebar h4, #sidebar-alt h4 {
    background:url('images/widget-title-bg.png'); 
    color: #333333;
    font-size: 22px;
    font-family: Arial, sans-serif;
    font-weight: normal; 
    margin: 0 0 10px 0; 
    padding: 7px 0px 11px 0px; 
    }
4

5 回答 5

2

编辑：根据您的评论进行了一些更改。尝试：

<h1 id="progress">
    <i></i>Recent Posts
</h1>​
#progress {
    display: block;
    max-width: 200px;
    min-width: 150px;
    position: relative;
    margin: 50px auto 0;
    padding: 0 3px;
    border-bottom: 10px solid #ECECEC;
    font: bold 26px 'Dancing Script', cursive;
}
#progress i {
    display: block;
    position: absolute;
    width: .8em;
    height: 10px;
    left: 0;
    bottom: -10px;
    background-color: #4287F4;
}​

http://jsfiddle.net/userdude/z45QJ/4/

我不是这种position操作的忠实拥护者，但是所有浏览器都应该几乎相同地支持和显示这一点，唯一可能的问题是字体的显示在不同的浏览器中可能略有不同。但是，IE7-9 应该可以很好地解释其他所有内容。

太糟糕了整个 wuuurld 不在 WebKit 上：

<div id="progress"></div>​

#progress {
    width: 300px;
    height: 10px;
    border: none;
    background-color: #ECECEC;
    border-left: solid #4287F4;
    box-shadow:inset 2px 0 white;
    -webkit-animation: slide 10s linear infinite;
}
@-webkit-keyframes slide {
    from {
        border-left-width: 0;
        width: 300px;
    } to {
        border-left-width: 300px;
        width: 0;
    }
}​

http://jsfiddle.net/userdude/z45QJ/1

它可以调整为双向。但是，它仅适用于 WebKit 浏览器（Chrome、Safari [?]）。如果没关系，请告诉我，我会添加回程。

于 2012-12-31T07:04:29.550 回答
1

有四种方法可以做到这一点。我在这个 JSFiddle 中演示了四种方式，这里有一些解释。

如果您不确定，请使用方法 B。

方法A

方法 A 的优点是它是最兼容的，但缺点是它需要额外的 HTML。基本上，您为外部 div 提供蓝色边框，为内部 div 提供白色边框。您的 HTML 将如下所示：

<div class="methodA">
    <div class="container">
        Method A
    </div>
</div>

您的 CSS 将如下所示：

.methodA {
    border-left: 10px solid blue;
}
.methodA .container {
    height: 100%;
    border-left: 10px solid white;
}

方法B

方法 B 的优点是没有额外的 HTML，但缺点是它在 9 版本之前的 IE 中不起作用。

.methodB {
    border-left: 10px solid blue;
    -webkit-box-shadow: inset 10px 0 white;
    -moz-box-shadow: inset 10px 0 white;
    box-shadow: inset 10px 0 white;
}

您可以使用CSS3 PIE缓解 IE 的兼容性问题，这使得框阴影在 Internet Explorer 中表现（以及其他 CSS3 功能）。

方法 C 和 D

这个 JSFiddle展示了另外两种方法，我不会详细描述，但是......

  • 方法 C 使蓝色边框成为阴影。结果，它可以“覆盖”其他元素，并且还可以更改元素的大小。我不喜欢这个解决方案，但它可能对你有用。它还存在方法 B 的兼容性问题。
  • 方法 D 在元素内部放置两个 div：一个用于蓝色边框，一个用于右边框。
于 2012-12-31T07:05:52.077 回答
1

它并不复杂，也不需要额外的 HTML。

h4:after {
    display:block;
    content: '';
    height:4px;
    width: 1px;
    border:0px solid #ececec;
    border-left-width: 10px;
    border-left-color:#4287F4;
    border-right-width: 90px;
}​

http://jsfiddle.net/N27CH/

于 2012-12-31T08:04:08.410 回答
0

检查此链接访问 (http://jsfiddle.net/qD4zd/1/)。看看有没有帮助。这告诉你梯度的应用。看看它是如何完成的。另外为什么不直接使用您想要的图像作为边框。查看 Css 中的“渐变”。这可能会回答你的问题。

于 2012-12-31T08:22:54.300 回答
0

我研究了 HTML5 中“canvas”标签的一些用法。这是关于梯度规范的大量信息，并且比传统的 HTML4 更具可读性。所以对于这个问题，我还想请提问者查看 HTML5 中的“画布”标签。检查下面的链接。

    Link: http://html5center.sourceforge.net/Using-Unprefixed-CSS3-Gradients-in-Modern-Browsers

    Link: http://www.sendesignz.com/index.php/web-development/111-how-to-create-gradient-and-shadow-effect-in-html5-canvas

第二个链接更棒。干杯。：）

于 2013-01-04T12:14:05.333 回答