需求：
設(shè)計(jì)一個(gè)標(biāo)題，讓中間部分隨著文字而撐大，同時(shí)文字漸變，兩邊自適應(yīng)，這種情況就不能用傳統(tǒng)的背景圖片了，想到可以使用圖片邊框來做
解決思路：?
1.需要一個(gè)大盒子和三個(gè)小盒子
2.大盒子設(shè)置display:flex; 左右兩個(gè)小盒子分別設(shè)置flex-grow; 并設(shè)置背景圖片
3.給中間盒子設(shè)置邊框圖片（重點(diǎn)）關(guān)于邊框圖片可參考：CSS 邊框圖像 (w3school.com.cn)
上代碼：文章來源：http://www.zghlxwxcb.cn/news/detail-699635.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>demo</title>
<style type="text/css">
body {
background-image: url('background_main.png');
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.left, .right {
flex-grow: 1;
/* 背景圖不平鋪 */
background-repeat: no-repeat;
/* 當(dāng)內(nèi)容高度大于圖片高度時(shí)，背景圖像的位置相對于viewport固定 */
/* background-attachment: fixed;*/
/* 讓背景圖基于容器大小伸縮 */
background-size: 100% 90%;
/* 設(shè)置背景顏色，背景圖加載過程中會(huì)顯示背景色 */
}
.left {
text-align: right;
background-image: url('left.png');
}
.right {
text-align: left;
background-image: url("right.png");
}
.box {
letter-spacing: -1px;
font-weight: bold;
color: #0072F0;
font-size: 39px;
background: linear-gradient(0deg, #69CCFF 0%, #FFFFFF 100%); // 文字漸變
-webkit-background-clip:text; // 文字漸變
-webkit-text-fill-color:transparent; // 文字漸變
width: auto;
display: inline-block;
border: 10px solid; // 圖片邊框設(shè)置
border-top: 0; // 圖片邊框設(shè)置，(注意:我的demo是不需要設(shè)置上邊框的，所以添加了該屬性，請大家自行選擇)
padding: 0 15px;
border-image-source: url('background_head.png'); // 圖片邊框設(shè)置
border-image-slice: 1 595 70 595 fill; // 圖片邊框設(shè)置 (注意:我的圖片較大，請根據(jù)圖片裁剪)
border-image-width: 0 0 35; // 圖片邊框設(shè)置
border-image-repeat: stretch; // 圖片邊框設(shè)置
}
</style>
</head>
<body style="background: #031F5E;">
<!-- background: url('left.png') no-repeat center; -->
<div style="width:100%; height: auto; text-align: center; display: flex;">
<div class="left">
</div>
<div class="box">阿薩大大十大</div>
<div class="right">
</div>
</div>
</body>
</html>
文章來源地址http://www.zghlxwxcb.cn/news/detail-699635.html
到了這里，關(guān)于css使用border-image和flex布局設(shè)計(jì)一個(gè)隨著文字多少自適應(yīng)的標(biāo)題的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
