<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片边框</title>
<style>
html,body,div{
margin: 0;
padding: 0;
}
#box{
width: 300px;
height: 300px;
background-color: pink;
/*border: 30px solid orange;*/
margin: 100px auto;
/*!*设置图片边框的图片路径*!*/
/*border-image-source: url("img/border.png");*/
/*!*设置图片边框的宽度 可以为1到4个值 和margin 相同*!*/
/*border-image-width: 20px 20px 20px 20px;*/
/*!*第一不拉伸区域的大小 点九图 九宫格 可以为1到4个值 和margin 相同*!*/
/*border-image-slice: 26 26 26 26;*/
/*!*设置边框图片的重复样式 stretch 拉伸(默认的) repeat居中重复*!*/
/*!*round 挤一挤总会能方下的*!*/
/*border-image-repeat: round;*/
/*!*图片边框向外偏移的量 可以为1到4个值 和margin 相同*!*/
/*border-image-outset: 30px 30px 30px 30px;*/
/*复合属性 第一个值为 source 第二个值 是slice 可以为1到4个值
第三个值 是 width 可以为1到4个值 第四个参数为 outset 可以为1到4个值 第五个参数为 repeat 二三四 重间必须加 "/" */
border-image: url("img/border.png") 26 26 26 26 / 20px 20px 20px 20px / 30px round;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>
网友评论