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

问答首页 → 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

2010年2月02日 20:30

ChenA
15
0 0 0

目前还没有答案

相关推荐

CSS 背景全攻略: 3. `background-clip`：控制背景渲染的区域，可以是`border-box`（背景绘制到边框边缘）、`padding-box`（背景绘制到内边距边缘）或`content-box`（背景绘制到内容边缘）。例如： ```css background-clip: border-...

详解CSS3中border-image的使用: 例如，如果你想让边框随着`border-width`的变化而改变，你可以结合`border-width`和`border-image`一起使用，确保`border-style`设置为`solid`或其他非`none`值。例如，一个简单的例子： ```css div { border-...

CSS3教程：background-clip和background-origin: 在CSS3中，`background-clip`和`background-origin`是两个重要的背景属性，它们用于控制元素背景的显示范围和定位基准。这两个属性是CSS3背景模块新增的功能，旨在提供更精细的背景图像控制。首先，`background-...

CSS属性列表.docx: - `border-color`, `border-left-color`, `border-left-style`, `border-left-width`, `border-right-color`, `border-right-style`, `border-right-width`: 对应设置边框的颜色、样式和宽度。 - `border-style`: ...

background属性的使用例子: 如果想要多个背景图像，可以用逗号分隔，如`background-image: url("image1.jpg"), url("image2.jpg");`。 `background-repeat`决定图像是否及如何在背景中重复。默认情况下，图像会水平和垂直方向平铺。你可以使用...

CSS属性列表.pdf: 4. **`border-image`**: 使用图像作为边框，并且可以指定图像如何填充边框区域。 - **子属性**: - `border-image-source`: 设置要使用的图像。 - `border-image-slice`: 设置图像边框的向内偏移。 - `border-...

无图片CSS圆角的五个实例: 这两个属性可以与`border-radius`结合使用，控制背景图片或颜色如何填充元素。`background-clip`决定背景是否扩展到边框，而`background-origin`定义背景图像的位置相对于元素的哪一部分。 ```css .box { width: ...

21.3 CSS 背景属性: - `background-clip`决定了背景颜色和图像绘制的区域，可选值有`border-box`（填充到边框内）、`padding-box`（填充到内边距内）或`content-box`（填充到内容区域内）。通过熟练掌握这些背景属性，设计师能够灵活...

css漂亮的多图片按钮样式: 接着，为了实现图片按钮，我们可以使用`background-image`属性，并结合`background-size`、`background-position`来控制图片的大小和位置： ```css .button-image { background-image: url('button-image.png'); ...

css3.0手册 doc版: `border-image`属性是CSS3的一个重要特性，它允许你使用图像来创建对象的边框，为网页设计提供了更多创意空间。该属性的语法结构如下： ```css border-image: none | <image> [ <number> | ]{1,4} [ / <border-...

CSS3边框应用.docx: CSS3的`border-image`属性允许使用图像来定义边框背景，增强了边框样式的表现力。它可以减少页面元素，避免为边框单独创建额外的图片。其语法与`background-image`类似： ```css border-image: none | <image url...

CSS3常用属性大全 (2).docx: - `border-image`：使用图像创建边框，包含`border-image-source`（图像源）、`border-image-slice`（切割图像）、`border-image-width`（边框宽度）、`border-image-repeat`（图像重复方式）和`border-image-outset...

详解css中background-clip属性的作用: 在CSS中，`background-clip`属性是一个非常实用的样式规则，它决定了元素背景的绘制范围，即背景...在实际项目中，可以结合其他CSS属性，如`background-image`、`background-position`等，创造出丰富的背景展示效果。

javascript与css标签对照表: 在 CSS 中，边框可以通过 `border` 属性进行设置，包括 `border-width`、`border-style` 和 `border-color`。在 JavaScript 中，这些属性的名称需首字母大写，例如： - `border` -> `border` - `border-bottom-...

css+圆角总结: 1. 使用`background-color`和`border-radius`组合： ```css .rounded-container { background-color: #fff; border-radius: 10px; } ``` 2. 对于有背景图片的容器，可以使用`background-image`、`background-...

CSS3背景、边框和边距相关属性演示案例: 通过`border-image`属性，我们可以使用图像创建复杂的边框效果。此外，`display`属性中的`flex`和`grid`布局模式，结合边距和边框属性，能够实现更灵活的响应式设计，适应不同设备的屏幕尺寸。通过上述讲解，...

HTML5+CSS3学习文档: 通常，它们会默认按照`background-clip:border`和`background-origin:padding`来处理，但在某些特定元素上，例如有`hasLayout`属性的元素，行为可能类似`background-clip:padding`和`background-origin:padding`。...

background属性设置: 首先，`background-color`子属性用于设置元素的背景颜色。它可以是预定义的颜色名称（如`red`、`blue`），也可以是十六进制（如`#FF0000`）、RGB（如`rgb(255, 0, 0)`）、RGBA（增加透明度控制，如`rgba(255, 0, 0, ...

Ask-but

我的问答 FAQ | 勋章

相关推荐

已解决问题

未解决问题

排行榜

查看全部排名>>

Global site tag (gtag.js) - Google Analytics