CSS3 border-image-outset 属性

最新推荐文章于 2025-07-29 13:36:53 发布

shengyin714959

最新推荐文章于 2025-07-29 13:36:53 发布

阅读量97

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： css3 前端 javascript

本文链接：https://blog.csdn.net/shengyin714959/article/details/132729280

笔记专栏收录该内容

2377 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

这篇博客介绍了CSS3的border-image-outset属性，包括如何设置该属性以影响边框外部的图像区域，浏览器的支持情况，以及其语法定义。通过实例展示了如何使用border-image-outset来指定边框图像外的距离。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实例

设置border-img-outset属性：

div { border-image-source: url(border.png); border-image-outset: 30 30; }

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
border-image-outset	15.0	11.0	15.0	6.0	15.0

属性定义及使用说明

border-image-outset用于指定在边框外部绘制 border-image-area 的量

默认值:	0
继承:	no
版本:	CSS3
JavaScript 语法:	object.style.borderImageOutset="30 30"

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

shengyin714959

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

outset边框html,CSS border-image-outset用法及代码示例

weixin_35931648的博客

06-26

1423

CSS border-image-outset属性是一种简写属性，用于指定元素边框图像放置在其框外的距离。注意：border-image-outset对border-image-source指定的图片生效。用法:border-image-outset:value;属性值：值影响Length将边框起始尺寸指定为尺寸。Number将边框的大小指定为对应的border-width的倍数。Initial将...

CSS border-image（边框图片）

細水、長流√的专栏

03-01

1万+

对于元素的边框我们除了可以使用《》一节中介绍的一些默认样式外，还可以通过 CSS3 中的 border-image 属性使用图像来作为元素的边框，以创建出丰富多彩边框效果。border-image 属性可以通过一些简单的规则，将一副图像划分为 9 个单独的部分，浏览器会自动使用相应的部分来替换边框的默认样式。

参与评论您还未登录，请先登录后发表或查看评论

CSS3 border-image属性

01-17

583

border-image-source:用在边框的图片路径上 border-image-slice:图片边框向内偏移 border-image-width:图片边框的宽度 border-image-outset:边框图像区域超出边框的量 border-image-repeat:图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。实例:

css 中border-image学习及使用

qwguo

04-29

1338

在CSS中，是一个强大的属性，它允许你使用图片来定义元素的边框，替代传统的纯色、虚线或实线边框。下面我们对属性进行详细学习： : 必需。指定作为边框图片的图像的路径。 : 可选。定义图片如何被分割成九个部分来创建边框效果。可以是数值、百分比或填充关键词（fill），默认是100%。 : 可选。设置边框图像的宽度，覆盖由产生的宽度。 : 可选。设置边框图像超出边框盒的量。 : 可选。定义图片如何在边框上重复。可能的值包括 , , , 和。 2. 简写形式常见简写形式为：如果只提供一个数值或百分比，它

详解CSS3中border-image的使用

09-25

**CSS3中的`border-image`属性详解** 在CSS3中，`border-image`是一个非常强大的特性，它允许我们使用图像来定义元素的边框样式，从而创造出更具视觉吸引力的效果。这个属性是CSS3入门学习中的基础知识，对于提升...

css3 border-image使用说明

12-02

CSS3的`border-image`属性是一个强大的特性，用于创建复杂的边框样式，它允许开发者使用图像作为边框，而非单一的颜色或渐变。在许多情况下，`border-image`可以帮助实现更具设计感和个性化的界面元素。这篇教程将...

深入浅析css3 border-image边框图像详解

12-13

在CSS3中，`border-image`是一个非常有用的属性，它允许开发者为元素的边框添加复杂的背景图像，从而创建出独特且富有创意的边框效果。这个属性可以替代传统的`border-style`，使得边框设计不再局限于简单的线性样式...

CSS3 border-image详解、应用及jQuery插件

09-25

在CSS3中，`border-image`是一个非常强大的特性，它允许开发者使用图像来定义边框样式，从而创造出更具视觉吸引力的界面。这个属性通过将图片进行切割和重复，然后将其应用到元素的边框上，提供了更为灵活的边框设计...

文本换行&背景属性&图片边框&CSS圆角&线性渐变&径向渐变

Fray_Zyt的博客

06-19

300

文本换行： word-wrap：normal（只在允许的断字点换行）/ break-word（允许长单词或URL地址换行到下一行）

【 CSS 边框和轮廓属性 Border&Outline】

Hey_Coder

12-04

7413

CSS 边框属性（Border 和 Outline）边框属性须知 1.样式最优先设置任何边框属性，必须先设置边框样式先声明 border-style 属性。元素只有在获得边框之后，才能改变其边框的宽度。主要内容边框宽度边框颜色边框样式边框圆角边框图像边框阴影轮廓所有边框属性 IE7- 不支持值 “inherit”。边框颜色 IE6-...

border-image属性分析

热门推荐

foreverling_ling的博客

08-19

2万+

border-image是CSS3的一个属性，由于比较复杂，总是处于一知半解的状态，今天下定决心，花时间整理了一下，供大家共勉和学习。border-image的用处没用border-image之前，觉得css的属性基本够用，border-image完全是将简单的工作复杂化，当学习完该属性以后，发现该属性的运用能够大大节省编码时间和效率，总结一下，大致适用于以下两个场景：元素边框不规则的情况。这时候

border-image 的正确用法

测试

11-02

1954

border-image 的正解用法border-image 边框图片，顾名思义: 指定边框使用的图片。尽管经常使用 border-image(-webkit-border-image)，但我们真的了解它的吗？本文分两部分来介绍 border-image：border-image 简史border-image 用法1. border-image 简史CSS3 border 最开始是做为一个独立模块...

css3中border-image的用法(fill 、border-image-outset 、border-image-width)

kbx8916的博客

03-20

2934

css3中border-image的用法注意: 1.border-image中的fill用于指定九宫格中中间部分是否显示，默认是没有fill,不显示。如果在四个切割数字clip之后添加fill,则显示九宫格中间部分，中间部分的显示效果是横向和竖向效果的叠加。 eg:border-image:url(1.jpg) 27px 32px 27px 32px fill round;

border-image详解

苏先生前端

07-15

3391

border-image border-image-slice: ; 默认值100%会将整个图放到div四个角落如上图所示：该属性的值指的是边框到四条界线的距离。通过线将图片划分为四个部分充当border。设置不同的值就是调整四条界线的位置从而实现不同的效果。 border-image-repeat: repeat; border-image-repeat: space; border-image-repeat: round ; <div class="first"

css border-image 边框图片

qq_35647460的博客

10-09

1020

border-image 复合属性。设置或检索对象的边框样式使用图像来填充。 <!DOCTYPE html> <html> <head> <style> div { border:15px solid transparent; width:300px; padding:10px 20px; } #round { border-image:url(/https/skill.blog.csdn.net/i/border.png) 30 30 round; } #stretch { border-image:ur

css3之三维变换详说