问答首页 → Web前端技术
0 0

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

我在网上看到一篇文章用的这种办法，效果很好。
如图:




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

我写了一个，可以填充内部的时候总是不对，只能控制填充padding区域或者是border区域，也可以手动指定大小，但是这样就不能对任意大小的控件使用了。而且圆角只有border的四个角上才有，如果是填充 padding就没有圆角。

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

我写的代码: 
<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>


bubble.png


CSS 
2010年2月02日 20:30
目前还没有答案

相关推荐

    鎏嫣宫守护wxss学习系列《三》背景（Background）与颜色（Color），边框(Border) .

    如果设置了这个属性，最好也添加下background-color ，用于当背景image不可见时保持与文本颜色有一定的对比度 3.background-repeat：设置对象背景图如何铺排填充。 repeat-x：背景在横向上平铺。 repeat-y：背景在...

    福优林@Qt5小白变大牛初级篇word---第10章.pdf

    背景图片使用background-image属性定义，它用于绘制由background-origin指定的矩形区域（空白、边框、填充或内容）。背景图片在矩形区域内的对齐和平铺方式可以通过background-position和background-repeat属性指定...

    css入门笔记

    属性：background-image：url(); 取值：url() 3.背景图像平铺 属性：background-repeat 取值： 1.repeat 默认值，横向和纵向同时平铺 2..repeat-x 纵向平铺 4.背景图像尺寸 属性：background-size: ...

    Happy-Holi

    background-image：url（“ ; } @import url（ ）; h2 {background-color：#FEFFED; 填充：30px 35px; 边距：-10px -50px; text-align：center; border-radius：10px 10px 0 0; }小时{保证金：10px -50px; 边界：0;...

    PT80-NEAT开发指南v1.1

    使用 NEAT 工程向导建立应用程序 ........................................................................................................ 5 编译及运行程序（模拟器下） ......................................

    Silverlight2.0功能展示Demo源码

    Margin - 容器边缘与边缘之外的空白距离（像素值：上下左右；左右,上下；左,上,右,下） Tag - 保存一些额外的信息（System.Object类型） 9、Silverlight(11) - 2.0动画之ColorAnimation, DoubleAnimation, ...

    Superstraticons:使用Python枕头的标识

    border_size：identicon网格周围的填充大小（像素）。 用法： from Identicon import Identicon def main (): i = Identicon () image = i . generate ( 'foobar' ) # Do anything you want with the image ...

    蝴蝶

    } .bgimg {background-image：url（'julius-drost-oC66vXsqnc8.jpg'）; 高度：100％; 背景位置：中心； 背景尺寸：封面； } .her {顶部：50％； 左：50％； 位置：绝对； 有轨电车：翻译（-50％，-50％）; 颜色：#...

    JavaScript 图片切割效果

    跟缩放效果配合使用时，不得不说ie6的一个渲染bug，用下面的代码测试（ie6）： Code &lt;!DOCTYPE ...

Magicbox
Ask-but
我的问答 FAQ | 勋章

相关推荐

已解决问题

未解决问题

排行榜

Global site tag (gtag.js) - Google Analytics