css使用border-image和flex布局设计一个随着文字多少自适应的标题-Toy模板网

这篇具有很好参考价值的文章主要介绍了css使用border-image和flex布局设计一个随着文字多少自适应的标题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需求：

设计一个标题，让中间部分随着文字而撑大，同时文字渐变，两边自适应，这种情况就不能用传统的背景图片了，想到可以使用图片边框来做

css使用border-image和flex布局设计一个随着文字多少自适应的标题

解决思路：

1.需要一个大盒子和三个小盒子

2.大盒子设置display:flex; 左右两个小盒子分别设置flex-grow; 并设置背景图片

3.给中间盒子设置边框图片（重点）关于边框图片可参考：CSS 边框图像 (w3school.com.cn)

上代码：

<!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;
    		/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
/*    		background-attachment: fixed;*/
    		/* 让背景图基于容器大小伸缩 */
    		background-size: 100% 90%;
    		/* 设置背景颜色，背景图加载过程中会显示背景色 */
		}

		.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; // 图片边框设置
			border-top: 0; // 图片边框设置，(注意:我的demo是不需要设置上边框的，所以添加了该属性，请大家自行选择)
			padding: 0 15px;
			border-image-source: url('background_head.png'); // 图片边框设置
			border-image-slice: 1 595 70 595 fill; // 图片边框设置 (注意:我的图片较大，请根据图片裁剪)
			border-image-width: 0 0 35; // 图片边框设置
			border-image-repeat: stretch; // 图片边框设置
		}
	</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>

　　文章来源地址https://www.toymoban.com/news/detail-699635.html

到了这里，关于css使用border-image和flex布局设计一个随着文字多少自适应的标题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！