前端大本营

HTML5,CSS3,Responsive,资料站

border-image-repeat 说明

border-image-repeat属性,指定图片边框图片重复样式时使用。根据值的不能,图片边框的图片放大缩小,或者是重复出现。<规定如何重复图像边框> 第二个参数省略的时候 值与第一个值相同 一般第一位值为水平方向,第二位值为垂直方向 还有,可以使用 border-image 来设置图片边框。

属性值

stretch 图片通过拉伸来填充边框领域(默认值) repeat 图片通过重复平铺来填充边框领域 round 图片通过重复平铺来填充边框领域,如果整数不能铺满的情况下,平铺的图片相应的扩大缩小。 space 图片通过重复平铺来填充边框领域,如果整数不能铺满的情况下,剩余的空白部分由图片的一部分填充。
※<>内表示的内容是从其他网站转录的内容。 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>border-image-repeat</title>
<style>
p.sample1 {
width:300px; height:75px;
border-image-source:url("images/bg_dot.png");
border-image-slice:15px;
border-image-width:2;
border-image-outset:5px;
border-image-repeat:round stretch;
border-style:solid; border-width:5px;
}
</style>

</head>

<body>
<p class="sample1">border-image-repeat图例</p>
</body>
</html>
实例图  border-image-repeat
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 图片边框 | border-image-repeat 图片边框图片重复 —— CSS3 参考 边框已关闭评论

border-image-outset 说明

属性,指定图片边框图片范围的宽度时使用。<属性规定边框图像超过边框盒的量> border-image-outset默认值与border-box一样的, 属性指定的4个值,从border的上,右,下,左的顺序开始配套指定。值省略的时候,按以下规则 第四个值省略的时候,值同第二个值 第三个值省略的时候,值同第一个值 第二个值省略的时候,值童第一个值。 border-image-outset属性,不能指定负数值。 border- image -outset设置后,会发生滚动条不滚动,鼠标事件被隐藏等情况。 还有,可以使用 border-image 来设置图片边框。

属性值

默认值 0 length 数字值 超出边框范围的距离。 number 数字值, 代表对应的 border-width 的倍数
※<>内表示的内容是从其他网站转录的内容。 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>border -image- outset</title>
<style>
p.sample1 {
width:300px; height:75px;
border-image-source:url("images/bg_dot.png");
border-image-slice:15px;
border-image-width:2;
border-image-outset:5px;
border-image-repeat:round stretch;
border-style:solid; border-width:5px;
}
</style>

</head>

<body>
<p class="sample1">border -image- outset图例</p>
</body>
</html>
实例图  border-image-outset
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 图片边框 | border-image-outset 图片边框图片范围宽度 —— CSS3 参考 边框已关闭评论

border-image-width 说明

属性,指定图片边框的宽度时使用。<规定图像边框的宽度> border -image- width属性指定的4个值,从border的上,右,下,左的顺序开始配套指定。值省略的时候,按以下规则 第四个值省略的时候,值同第二个值 第三个值省略的时候,值同第一个值 第二个值省略的时候,值童第一个值。 border-image-width属性,不能指定负数值。 还有,可以使用 border-image 来设置图片边框。

属性值

默认值 1 number 数字值 border-width的倍数。 % border图片的尺寸指定。 auto 和border-image-slice的值相同。值不存在的时候使用border-width设定的值。
※<>内表示的内容是从其他网站转录的内容。 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>border-image-width</title>
<style>
p.sample1 {
width:300px; height:75px;
border-image-source:url("images/bg_dot.png");
border-image-slice:15px;
border-image-width:2;
border-image-outset:5px;
border-image-repeat:round stretch;
border-style:solid; border-width:5px;
}
</style>

</head>

<body>
<p class="sample1">border-image-width图例</p>
</body>
</html>
实例图  border-image-width
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Posted in 图片边框 | border-image-width 图片边框宽度 —— CSS3 参考 边框已关闭评论

border-image-slice 说明

属性,指定图片边框的使用范围。<规定图像边框的向内偏移> border使用图片会被分成以下9个部分,其中4个角和4个角之间的部分为图片边框所影响的部分,中间的部分默认值是空白,如果设置为fill时,会在背景上表示。 border-image-slice属性指定的4个值,从border的上,右,下,左的顺序开始配套指定。值省略的时候,按以下规则 第四个值省略的时候,值同第二个值 第三个值省略的时候,值同第一个值 第二个值省略的时候,值童第一个值。 border-image-slice属性,不能指定负数值。比图片尺寸大的值设定的时候,会自动默认为100%。 还有,可以使用 border-image 来设置图片边框。

属性值

默认值 100% number 数字值,代表图像中像素(如果是光栅图像)或矢量坐标(如果是矢量图像)。 % 相对于图像尺寸的百分比值:图像的宽度影响水平偏移,高度影响垂直偏移。 fill 保留边框图像的中间部分。
※<>内表示的内容是从其他网站转录的内容。 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>border -image -slice</title>
<style>
p.sample1 {
width:300px; height:75px;
border-image-source:url("bg_dot.png");
border-image-slice:15px;
border-image-width:2;
border-image-outset:5px;
border-image-repeat:round stretch;
border-style:solid; border-width:5px;
}
</style>

</head>

<body>
<p class="sample1">border-image-slice图例</p>
</body>
</html>
实例图  border-image-slice
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 图片边框 | border-image-slice 图片边框范围 —— CSS3 参考 边框已关闭评论

border-image-source 说明

border-image-source属性,使用指定图片作为边框时使用。<使用一幅图像作为围绕 div 元素的边框> border-image-source指定后, border-style指定的样式会被替换, 图片边框会插入到边框中, 值为none的时候,则使用border-style的值。 还有,可以使用 border-image 来设置图片边框。

属性值

默认值 none 图片URL,图片地址
※<>内表示的内容是从其他网站转录的内容。 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> border-image-source </title>
<style>
p.sample1 {
width:300px; height:75px;
border -image-source:url("bg_dot.png");
border -image-slice:15px;
border -image-width:2;
border -image-outset:5px;
border -image-repeat:round stretch;
border -style:solid; border-width:5px;
}
</style>

</head>

<body>
<p class="sample1"> border-image-source 图例</p>
</body>
</html>
实例图  border-image-source
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 图片边框 | border-image-source 指定图片作为边框 —— CSS3 参考 边框已关闭评论

border -image 说明

border -image 属性,指定DIV图片边框时使用。<将图片规定为包围 div 元素的边框:> border -image 属性可以说是Border-image-source,Border-image-slice,Border-image-width,Border-image-outset,Border-image-repeat这几个属性的集合体,如果省略他们的值,会使用默认值。 图像的四个边框不一定指定4张图片,一张图片就可以构成完整的边框。 ※ border -image属性还有一部分浏览器不支持,即使支持border-image属性的,border-image-outset很多都不支持。
  1. 利用border-image-source指定边框所使用的图片
  2. 利用border-image-slice指定图片边框向内偏移的距离
  3. 利用border-image-width指定图片边框的宽度(也可以使用border-width指定)
  4. 利用border-image-repeat指定图片边框的展开方式,平铺,铺满,还是拉伸。
个值之间用 / 符号或是空格分开 border-image-source border-image-slice / border-image-width / border-image-outset border-image-repeat的顺序

属性值

默认值 border-image-source 为none, border-image-slice 为100%, border-image-width 为1, border-image-outset 为0, border-image-repeat 为stretch
※<>内表示的内容是从其他网站转录的内容。 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>border-image</title>
<style>
p.sample1 {
width:300px; height:75px;
border-image: url("bg_dot.png") 15 round;
border-style:solid; border-width:10px; 
}
p.sample2 {
width:300px; height:75px;
border-image: url("bg_dot.png") 15 round stretch;
border-style:solid; border-width:15px; 
}
p.sample3 {
width:300px; height:75px;
border-image: url("bg_dot.png") 15;
border-style:solid; border-width:15px; 
}
p.sample4 {
width:300px; height:75px;
border-image:url("bg_dot.png") 30;
border-style:solid; border-width:15px; 
}
</style>

</head>

<body>
<p class="sample1">图片边框1</p>
<p class="sample2">图片边框2</p>
<p class="sample3">图片边框3</p>
<p class="sample4">图片边框4</p>
</body>
</html>
实例图 border -image 指定DIV图片边框 —— CSS3 参考 边框
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 图片边框 | border -image 指定DIV图片边框 —— CSS3 参考 边框已关闭评论