怎么用border_image填充边缘，用background-color填充内部？

chena224503 2010-01-31 06:12:21

效果如图:

原文链接:http://blog.wolfire.com/2009/07/a-webkit-primer-part-1/

我写了一个，可以填充内部的时候总是不对，只能控制填充padding区域或者是border区域，圆角只有border的四个角上才有，如果是填充padding就没有圆角。

谁知道是怎么实现的？
谢谢。

...全文

243 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

chena224503 2010-02-03

打赏
举报

a3160586:
也许我没说明白，你把我的代码拷下来，运行一下就知道。

我用来测试的是firefox3.6和Chrome4.0。
我是把这个用在游戏的gui的，我也不知道是css几，我根本就不懂css。
谢谢几位的回答。

cwblaze 2010-02-02

打赏
举报

这是腾讯ISD部门整理的CSS3.0参考手册
楼主可以下下来参考学习下。

cwblaze 2010-02-02

打赏
举报

[Quote=引用 5 楼 cs5276 的回复:]
看起来非常像CSS 3的新效果，

莫非LZ在用CSS 3？

那得在新版的浏览器上才能看到呀。

FF 3.6、Safari 4、Chrome 4.0 BETA

这些浏览器支持得比较好。

CSS 3这种新技术，虽然国外已经很热了。

但是国内好像还是没有跟上脚步。

LZ可以去WEB大版版主net_lover的博客看一下。
[/Quote]

-moz-border-radius
这就是CSS3阿。

cs5276 2010-02-02

打赏
举报

看起来非常像CSS 3的新效果，

莫非LZ在用CSS 3？

那得在新版的浏览器上才能看到呀。

FF 3.6、Safari 4、Chrome 4.0 BETA

这些浏览器支持得比较好。

CSS 3这种新技术，虽然国外已经很热了。

但是国内好像还是没有跟上脚步。

LZ可以去WEB大版版主net_lover的博客看一下。

a3160586 2010-02-02

打赏
举报

没有看懂说的是什么~~~~~~

chena224503 2010-02-02

打赏
举报

没人知道吗？

chena224503 2010-01-31

打赏
举报

bubble.png

chena224503 2010-01-31

打赏
举报

忘了贴代码了:

<html>

<head>

<title>zz</title>





</head>

<body>

<style type="text/css">

.border_image

{

    border-width: 7px 10px 12px 10px;

    padding: 0px 0px 0px 0px;



    

    

    -webkit-border-image: url(bubble.png) 7 10 12 10 stretch stretch;

    -webkit-border-radius: 5px;

    background: -webkit-gradient(linear, 0% 0%, 0% 100%, to(rgba(43, 128, 0, 0.75)), from(rgba(169, 255, 127, 0.75)));

    /*-webkit-background-size: 172px 32px;

    -webkit-background-position: -6px -5px;*/     

    -webkit-text-fill-color:rgba(0,0,0,0.75);



        

    -moz-border-image: url(bubble.png) 7 10 12 10 stretch stretch;    

    -moz-border-radius: 5px;

    background: -moz-linear-gradient(top left, red, green);

    /*-moz-background-size: 172px 32px;

    -moz-background-position: -6px -5px;*/



            







    background-repeat: no-repeat;

    text-shadow: 0 1px 0 rgba(255,255,255,0.2);

    width: 180px;

    height: 40px;

   

}



}

</style>





<button class="border_image">zzzz</button>





</body>

</html>