border-image用法详解


图像边框 border-image
使用方法:border-image:url('图像路径') 边距(不能带单位)/宽度 上下方式 左右方式;(四个边距,上右下左,相同时可缩写为一个)
repeat平铺 stretch拉伸  round

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<style type="text/css">
         
 
        .div1{
            display: inline-block;
            margin-right: 30px;
            background: #000;
            width: 389px;
            height: 389px;
            border-style: solid;
            border-width: 100px;  /*设置边框宽度之前要先设置边框样式,不然不会显示的,这是在content外添加空间*/
            border-image:url("images/3.jpg") 100 repeat;
        }
        .div2{
            display: inline-block;
            background: darkred;
            width: 389px;
            height: 389px;
            /*直接在border-image中设置border宽度,这样实际上是占用了content的区域空间*/
            border-image:url("images/3.jpg") 100/100px repeat;
        }
 
 
    </style>
</head>
<body>
<div class="div1">CSS3新增的background-clip属性</div>
<div class="div2">CSS3新增的background-clip属性</div>
</body>

 

posted @   yolo_bean  阅读(1173)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示