css3 border-image-outset属性笔记

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

定义及用法

1、在php中,border-image-outset属性是用来规定边框图像超过边框盒的量;

2、border-image-outset属性可以有一个参数、两个参数、三个参数、四个参数,分别代表上、右、下、左;如果只有三个参数,第四个参数的值默认是第二个参数的值;如果只有两个参数,第三个参数的值默认是第第一个个参数的值,第四个参数的值默认是第二个参数的值;如果只有一个参数,后三个参数的值默认是第一个参数的值。

语法格式:

border-image-outset: length|number;

说明:

  • length:设置边框图像与边框的距离,默认为0。
  • number 代表相应的 border-width 的倍数

border-image-outset值不允许为负数

实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3 border-image-outset属性笔记</title>
<style>
#outset {
border: 16px solid transparent;
padding: 15px;
border-image: url(https://www.ggbiji.com/wp-content/uploads/2017/11/border-image.png);
/*指定要用于绘制边框的图像的位置*/
border-image-slice: 30;/*图像边界向内偏移*/
border-image-repeat: round;/*设置图像边界铺满(round)*/
border-image-outset:10px 8px 2px;
}
</style>
<head/>
<body>
<div id="outset">
css3 border-image-outset属性演示!
</div><br/>
图像原型:<br/>&nbsp;&nbsp;<img src="https://www.ggbiji.com/wp-content/uploads/2017/11/border-image.png" alt="border-image" title="border-image" />
</body>
</html>

运行结果:

注意:Internet Explorer 10 及其更早版本不支持 border-image-outset 属性。

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

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

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

发表评论


表情