ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

边框图片

2019-07-27 11:40:48  阅读:117  来源: 互联网

标签:repeat image 边框 width 宽度 border 图片


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 200px;
            height: 200px;
            margin:100px auto;
            box-sizing: border-box;
            border: 27px solid red;
            /*padding: 27px;*/
            /*添加边框图片*/
            /*border-image-source:可以指定边框图片的路径,默认只是填充到容器的四个角点*/
            /*border-image-source: url("../images/border1.png");*/
            /*让它成为九宫格:border-image-slice:设置四个方向上的裁切距离.fill:做内容的内部填充  问题:如果分别设置1,2,3,4个值代表什么意思*/
            /*border-image-slice: 27 fill;*/
            /*border-image-width:边框图片的宽度。如果没有设置这个属性,那么宽度默认就是元素的原始的边框宽度。
            细节:1.边框图片的本质是背景,并不会影响元素内容的放置  2.内容只会被容器的border和padding影响
            建议:一般将值设置为原始的边框的宽度*/
            /*border-image-width: 27px;*/
            /*border-image-outset:扩展边框*/
            /*border-image-outset: 0px;*/
            /*border-image-repeat:
            repeat:直接重复平铺
            round:将内容缩放进行完整的重复平铺*/
            /*border-image-repeat: round;*/

            /*缩写:*/
            /*border-image: source slice / width/outset repeat;*/
            border-image: url("../images/border1.png") 27 / 27px /0px round;
        }
    </style>
</head>
<body>
<div>边框图片的宽度。如果没有设置这个属性,那么宽度默认就是元素的原始的边框宽度</div>
</body>
</html>

 

标签:repeat,image,边框,width,宽度,border,图片
来源: https://blog.csdn.net/qq_20497071/article/details/97497751

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有