• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • border-image-outset

    版本:CSS3

    border-image-outset属性定义边框图像可超出边框盒的大小。

    示例

    /* border-image-outset: sides */
    border-image-outset: 30%;
    
    /* border-image-outset:垂直 水平 */
    border-image-outset: 10% 30%;
    
    /* border-image-outset:  顶 水平 底 */
    border-image-outset: 30px 30% 45px;
    
    /* border-image-outset:顶 右 底 左 */
    border-image-outset: 7px 12px 14px 5px;
    
    border-image-repeat: inherit;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE11以上版本的浏览器都支持border-image-outset

    语法

    border-image-outset:sides| horizontalvertical| topbottomrightleft| inherit
    • 当指定一个值时,它对所有四个边应用相同的数值。
    • 当指定两个值时,第一个宽度应用于顶部和底部,第二个宽度应用于左侧和右侧。
    • 当指定三个值时,第一个宽度应用于顶部,第二个宽度应用于左侧和右侧,第三个宽度应用于底部。
    • 当指定四个值时,宽度将按顺时针顺序应用于顶部、右侧、底部和左侧。

    取值:

    • sides:边框图像在四个方向超出边框盒的<length><number>数量。
    • horizontal:边框图像在水平方向(左和右)超出边框盒的<length><number>数量。
    • vertical:边框图像在垂直方向(上和下)超出边框盒的<length><number>数量。
    • top:边框图像在上方超出边框盒的<length><number>数量。
    • bottom:边框图像在下方超出边框盒的<length><number>数量。
    • right:边框图像在右方超出边框盒的<length><number>数量。
    • left:边框图像在左方超出边框盒的<length><number>数量。
    • inherit:四个方向的值都继承于父元素的该属性计算后值。
    默认值0
    适用于所有元素,除table元素设置了border-collapse:collapse之外
    继承性
    动画性
    计算值指定值

    实例

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <style>
    p{
     border:15px solid;
     padding:30px;
     border-image:url(images/kuang.jpg) 100 round;
     border-image-outset:1px 10px 8px;
    }
    </style>
    </head>
    <body>
    <p>CSS学编程</p>
    </body>
    </html>

    效果图: