码迷,mamicode.com
首页 > 其他好文 > 详细

H5C3--边框图片

时间:2018-01-07 23:35:06      阅读:317      评论:0      收藏:0      [点我收藏+]

标签:导致   height   char   设置   log   bsp   目的   pad   and   

类似于android的.9图片,目的是为了防止图片因为内容的扩展而导致图片拉伸失真。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             width: 200px;
 9             height: 300px;
10             border: 1px solid #000;
11             box-sizing: border-box;
12             padding: 26px;
13             
14             /*添加边框图片*/
15             /*border-image-source: url("../images/border1.png");
16             !*设置裁切区域*!
17             border-image-slice: 27;
18             !*边框的宽度默认宽度等于当前元素的边框宽度
19             注意:边框图片相当于背景,并不会对容器的内容区域的大小产生任何的影响,所以可能会造成内容与边框图片的重叠*!
20             border-image-width: 27px;
21             !*设置边框图利的拉伸和平铺*!
22             border-image-repeat: round;
23             !*设置边框的扩展*!
24             border-image-outset: 0px;*/
25 
26             /*简写:border-image:source slice / width / outset repeat*/
27             border-image: url("../images/border1.png") 27 / 27px  round;
28         }
29     </style>
30 </head>
31 <body>
32 <div>边框的宽度默认宽度等于当前元素的边框宽度边框的宽度默认宽度等于当前元素的边框宽度</div>
33 </body>
34 </html>

技术分享图片

 

 

 

实例:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 300px;
            border: 1px solid #ccc;
            padding:10px;

            border-image-source: url("../images/btn_bg.png");
            /*fill:填充中间区域*/
            border-image-slice: 10 fill;
            border-image-width: 10px;
        }
    </style>
</head>
<body>
<div>注意:边框图片相当于背景,并不会对容器的内容区域的大小产生任何的影响,所以可能会造成内容与边框图片的重注意:
边框图片相当于背景,并不会对容器的内容区域的大小产生任何的影响,所以可能会造成内容与边框图片的重叠注意:
边框图片相当于背景,并不会对容器的内容区域的大小产生任何的影响,所以可能会造成内容与边框图片的重叠注意:
边框图片相当于背景,并不会对容器的内容区域的大小产生任何的影响,所以可能会造成内容与边框图片的重叠注意
:边框图片相当于背景,并不会对容器的内容区域的大小产生任何的影响,所以可能会造成内容与边框图片的重叠注意:
边框图片相当于背景,并不会对容器的内容区域的大小产生任何的影响,所以可能会造成内容与边框图片的重叠注意:
边框图片相当于背景,并不会对容器的内容区域的大小产生任何的影响,所以可能会造成内容与边框图片的重叠叠</div>
</body>
</html>

 

技术分享图片

 

H5C3--边框图片

标签:导致   height   char   设置   log   bsp   目的   pad   and   

原文地址:https://www.cnblogs.com/mrszhou/p/8232407.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!