border-image相关笔记

1.border-image相关笔记，待整理

其实边框背景图的作用，一方面可以自定义一些好看的边框，另一方面，如果直接把一张图作为背景，当这张图出现拉伸时，图片主体的纹理和四个角的纹
理会拉伸导致错开，这是border-image就可以解决这个问题，先把需要当做边框的图片部分用slice属性裁剪出来，这时候图片分为了边框和主体两部分，然后这两部用stretch
拉伸，而且四个角不会受到拉伸影响

<!DOCTYPE HTML>
<html>
<head>
    <title>index</title>
    <meta charset="utf-8">
    <meta name="Author" content="Helen">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
　　
            width: 200px;
            height: 200px;
            margin: 20px auto;
            border: 27px solid red;
            border-image-source: url("images/border1.png");
            /*slice是从外到里需要剪切多少image作为边框,fill指除了边框同时剪切背景图中间的image,注意这句不用加单位*/
            /*border-image-slice: 27 fill;*/
            /*注意上下两个属性，上面是剪切image多宽，下面是剪切好的图像要显示多宽，互不影响*/
            /*width是剪切的image显示多宽，为了匹配盒子的border值，一般将它两设为一样，默认它两也是一致的*/
            /*border-image-width: 27px;*/
            /*border-image-outset扩展边框，就是将剪切好的边框扩大，就像padding值撑大了盒子的border一样*/
            /*border-image-outset: 2px;*/
            /*这个平铺是背景图像在盒子对应的四个边分别平铺*/
            /*border-image-repeat: round    会重复和拉伸图片，使其填满整个背景*/
            /*border-image-repeat:的stretch是默认值，指的是拉伸背景图而不是重复平铺（纯粹是拉伸，不会有平铺现象）;*/
            /*border-image-repeat: repeat;*/
            /*border-image-repeat: round;*/
            /*border-image-repeat: stretch;*/

            /*连写注意：需要加/符号，width和outset可以省略*/
            /*border-image: source slice / width / outset repeat;*/
            border-image: url("images/border1.png") 27/27px /2px round;
        }
        /*边框背景图是81*81,实际的图像的是27的宽度,所以将边框设为27*/
        
    </style>
</head>
<body>
<div></div>
</body>
</html>

border-image相关笔记

猜你喜欢