css3 border-image-slice属性笔记

原创 PHP笔记  2017-11-26 17:33  阅读 1,968 views 次

定义及用法

1、在php中,border-image-slice属性是用来指定图像的边界向内偏移;

2、border-image -slice属性指定顶部、右边缘、底部、左边缘的图像向内偏移,分为九个区域:四个角、四边、中间。图像中间部分将被完全透明的处理,除非填写关键字。

3、border-image -slice属性可以有四个参数,如果省略第四个参数,它会默认和第二个相同的;如果第三个也省略了,它会默认和第一个相同。如果也省略了第二个,它和第一个是相同的。

border-image -slice属性值

  • number:数字表示图像的像素(位图图像)或向量的坐标(如果图像是矢量图像);
  • %:百分比图像的大小是相对的:水平偏移图像的宽度,垂直偏移图像的高度;
  • fill:保留图像的中间部分。

语法格式:

border-image-slice: number / % / fill;

实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3 border-image-slice属性笔记</title>
<style>
.slice{background-color:#6ee;border: 30px solid transparent;
border-image: url('https://www.ggbiji.com/wp-content/uploads/2017/11/border-image.png');
border-image-repeat: repeat;}
#slice1{border-image-slice:30;}
#slice2{border-image-slice:35%;}
</style>
<head/>
<body>
<div class="slice" id="slice1">
css3 border-image-slice属性演示1!
</div><br />
<div class="slice" id="slice2">
css3 border-image-slice属性演示2!
</div>
<p>图片原型:</p>
<img src="https://www.ggbiji.com/wp-content/uploads/2017/11/border-image.png">
</body>
</html>

运行结果:

定义及用法 在php中,c是用来指定图像的边界向内偏移; border-image -slice属性指定顶部、右边缘、底部、左边缘的图像向内偏移,分为九个区域:四个角、四边、中间。图像中间部分将被完全透明的处理,除非填写关键字。 border-image -slice属性可以有四个参数,如果省略第四个参数,它会默认和第二个相同的;如果第三个也省略了,它会默认和第一个相同。如果也省略了第二个,它和第一个是相同的。 border-image -slice属性值 number:数字表示图像的像素(位图图像)或向量的坐标(如果图像是矢量图像); %:百分比图像的大小是相对的:水平偏移图像的宽度,垂直偏移图像的高度; fill:保留图像的中间部分。 语法格式: border-image-slice: number / % / fill; 实例: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3 border-image-slice属性笔记</title> <style> .slice{background-color:#6ee;border: 30px solid transparent; border-image: url('https://www.ggbiji.com/wp-content/uploads/2017/11/border-image.png'); border-image-repeat: repeat;} #slice1{border-image-slice:30;} #slice2{border-image-slice:35%;} </style> <head/> <body> <div class="slice" id="slice1"> css3 border-image-slice属性演示1! </div><br /> <div class="slice" id="slice2"> css3 border-image-slice属性演示2! </div> <p>图片原型:</p> <img src="https://www.ggbiji.com/wp-content/uploads/2017/11/border-image.png"> </body> </html> 运行结果: 相关属性——>css3 border-image边框图片属性笔记(可以使用border-image属性来设置所有 的border-image-*属性) 更多css属性——>css属性大全

相关属性——>css3 border-image边框图片属性笔记(可以使用border-image属性来设置所有 的border-image-*属性)

更多css属性——>css属性大全

本文地址:https://www.ggbiji.com/border-image-slice.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情