CSS不规则边框实现方案
2020-02-18 本文已影响0人
写前端的大叔
在做大屏展示的时候，经常会碰到背景边框不规则的情况，如下所示：
不规则边框.png
主要实现思路是将边框单独切一个图片出来，然后再设置边框各边的宽度，切图如下所示：
border.png
border-image: url(./../images/border.png) 51 38 21 132;
border-width: 51px 38px 21px 132px;
设置border-width主要是为了保证背景容器放大的时候只拉伸边框，保证4个角上的形状不变。
边框设置.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大屏背景</title>
<style>
body{
color: #fff;
background-color: #101129;
margin: 30px;
}
.bg{
box-sizing: border-box;
border: 1px solid;
border-image: url(./../images/border.png) 51 38 21 132;
border-width: 51px 38px 21px 132px;
display: inline-block;
}
.inner{
margin-left: -70px;
margin-top: -30px;
margin-right: 20px;
}
</style>
</head>
<body>
<div class="bg">
<div class="inner">
<p>
大屏不规则背景边框大屏不规则背景边框
</p>
<p>
大屏不规则背景边框
</p>
<p>
大屏不规则背景边框
</p>
<p>
大屏不规则背景边框
</p>
<p>
大屏不规则背景边框
</p>
<p>
大屏不规则背景边框
</p>
<p>
大屏不规则背景边框
</p>
<p>
大屏不规则背景边框
</p>
</div>
</div>
</body>
</html>
