是否有可能创建一个边界像流动的图像与CSS？根据您的意见做了一些改变：任何提示可以理解造型师Css边框创作

enter image description here

#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; 
    }

来源

2012-12-31 Arafin Shaon

你想制作一个像这样的静态图像，否则这个图像会被蓝色覆盖？ –

你想如何使用垂直或水平？你可以通过背景图像做到这一点...但是id不支持它 –

http://jsfiddle.net/roine/WhzNf/ –

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

来源

2012-12-31 08:22:54

tnx pblm解决.. –

@ArafinShaon：发布“增票”相当于感谢。:)永远坚持“赞成票”比感谢评论。:) –

编辑。尝试：

<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操纵的大风扇，但所有的浏览器都支持，并显示此几乎相同，唯一可能出现的问题是字体的DISPLA可能会略有不同的不同的浏览器。但是，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-31 07:04:29

有四种方法可以做到这一点。 I demonstrate four ways in this 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，但缺点是那it won't work in IE before version 9。

.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

This JSFiddle表明另外两种方法，我就不一一介绍了在尽可能多的细节，但...

方法C，使蓝色边框阴影。因此，它可以“覆盖”其他元素，并且还会更改元素的大小。我不喜欢这个解决方案，但它可能适合你。它也遭受了方法B的兼容性问题。
方法D在元素内部放置两个div：一个用于蓝色边框，另一个用于右边框。

来源

2012-12-31 07:05:52

tnx您的努力@evan我的问题解决了。欣赏它:)上帝保佑你... –

它并不真正复杂，也不需要额外的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-31 08:04:08

txx吨伴侣作品像一个魅力:)上帝保佑你... –

我研究了HTML5中“canvas”标记的一些用法。这对于渐变规格来说非常有用，并且比传统的HTML4更具可读性。所以对于这个问题，我也想请求提问者查看HTML5中的“canvas”标签。检查下面的链接。

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-04 12:14:05

造型师Css边框创作

回答

方法A

方法B

方法c和d

相关问题