Java 后端学习笔记

提示

本文主要讲解 CSS 属性图像边界的使用。@ermo

# CSS3 边框图片 border-image

border-image 可以使用图片来替换元素边框的默认样式，可以将一幅图片切割为9个部分，利用这些部分组成一个元素的边框。border-image 属于简写形式，包含以下5个属性：

语法为：

border-image：border-image-source || border-image-slice [ / border-image-width | / border-image-width ? / border-image-outset ]? || border-image-repeat
  • border-image-source：定义边框图片的路径
  • border-image-slice：设置边框图片的分割位置
  • border-image-width：边框图片的宽度
  • border-image-outset：边框图片的外延尺寸
  • border-image-repeat：边框图片的平铺方式

看一个简单例子：

<div class="borderimage1"></div>

.borderimage1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(../assets/border.png) 30 round;
}

# border-image-source

border-image-source 可以设置图片边框的路径。语法为：

border-image-source：none | <image>
  • none 表示不设置图片边框路径，使用默认样式
  • <image> 使用 url() 设置图片边框的路径

示例：

<div class="borderimage2"></div>

.borderimage2 {
    width: 200px;
    border: 27px solid;
    padding: 10px;
    border-image-source: url(../assets/border.png);
}

# border-image-slice

语法为：

border-image-slice：[ <number> | <percentage> ]{1,4} && fill?

border-image-slice 可以接受三种类型的值：

  • <number>：数值，指定图片的具体分割位置，数值代表图像的像素位置或坐标
  • <percentage>：百分比，指定相对于图片尺寸的百分比
  • fill：保留图像的中间部分

除了 fill 属性值，其他两种值都允许至多输入4个值：

  • 一个值，图片的上、右、下、左都按照该值进行分割
  • 两个值，图片的上、下使用第一个值，图片的左、右使用第二个值
  • 三个值，图片的上使用第一个值，左右使用第二个值，下使用第三个值
  • 四个值，图片的上、右、下、左分别对应这个四个值

示例：

<div class="borderimage3"></div>

.borderimage3 {
    width: 200px;
    border: 27px solid;
    padding: 10px;
    border-image-source: url(../assets/border.png);
    border-image-slice: 27;
}

# border-image-width

border-image-width 用于设置边框图片的宽度，语法为：

border-image-width：[ <length> | <percentage> | <number> | auto ]{1,4}

四种属性值分别为：

  • <lenght>：使用数值加单位的形式指定宽度
  • <percentage>：使用百分比的形式指定宽度
  • <number>：使用浮点数值的形式指定宽度
  • auto：由浏览器自定设定

border-image-widht 也可以接受至多4个值：

  • 一个值，图片的上、右、下、左都按照该值进行设置宽度
  • 两个值，图片的上、下使用第一个值，图片的左、右使用第二个值
  • 三个值，图片的上使用第一个值，左右使用第二个值，下使用第三个值
  • 四个值，图片的上、右、下、左分别对应这个四个值

示例：

<div class="borderimage4"></div>

.borderimage4 {
    width: 200px;
    border: 27px solid;
    padding: 10px;
    border-image-source: url(../assets/border.png);
    border-image-slice: 27;
    border-image-width: 10px;
}

# border-image-outset

border-image-outset 可以设置边框图片的外延尺寸。也就是边框图片相对于边框边界向外偏移的距离。

语法为：

border-image-outset：[ <length> | <number> ]{1,4}

属性值有2中写法：

  • <lenght>，用具体的数值加单位的形式进行设置
  • <number>，用浮点数进行设置

border-image-outset 至多可以接受4个值，方向与上述 border-image-widht 相同。

示例：

<div class="borderimage5"></div>

.borderimage5 {
    width: 200px;
    border: 27px solid;
    padding: 10px;
    border-image-source: url(../assets/border.png);
    border-image-slice: 27;
    border-image-width: 10px;
    border-image-outset: 25px;
}

# border-image-repeat

border-image-repeat 用于设置边框图片的填充方式，语法为：

border-image-repeat：[ stretch | repeat | round | space ]{1,2}

属性值语法为：

  • stretch：使用拉伸的方式来填充边框
  • repeat：使用重复平铺的方式来填充边框，碰到边界时，超出的部分会被截断
  • round：使用重复平铺的方式来填充边框，如果不能整数次进行平铺，边框会被适当缩放
  • space：与 repeat 相似，如果不能整数次进行平铺，使用空白间隙进行填充

border-image-repeat 允许1~2个参数：

  • 一个参数：水平和垂直方向都使用这种平铺方式
  • 两个参数：第一个参数用于水平方向平铺，第二个参数用于垂直方向平铺

示例：

<div class="borderimage6"></div>

.borderimage6 {
    width: 200px;
    border: 27px solid;
    padding: 10px;
    border-image-source: url(../assets/border.png);
    border-image-slice: 27;
    border-image-width: 10px;
    border-image-outset: 25px;
    border-image-repeat: round repeat;
}

← CSS3 背景 →