CSS边框渐变和突变效果

qscgy101

已于 2022-03-04 15:42:10 修改

阅读量241

点赞数

分类专栏： CSS 文章标签： css

于 2022-03-04 15:39:26 首次发布

本文链接：https://blog.csdn.net/qscgy101/article/details/123276012

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

显示效果

代码片段

<!DOCTYPE html>
<html>
<head>
<style>
div.gradient{
	border:1px solid blue;
    text-align:center;
    border-image:linear-gradient(to right, blue, rgb(255,255,255,0)) 2;
    width:200px;
    height:100px;
    margin: 0 auto;
}
div.mutation{
	border:1px solid blue;
    text-align:center;
    border-image:linear-gradient(to right, blue 0%, blue 19.9%, rgb(255,255,255,0) 20%, rgb(255,255,255,1) 80%, blue 80.1%, blue 100%) 2;
    width:150px;
    margin: 0 auto;
    box-shadow:inset 0 0 2px blue;/*加阴影*/
}
</style>
</head>
<body>
<h1 style="text-align:center">边框渐变</h1>
<div class="gradient">
	<div style="width:100%; height:60px; margin-top:20px;">
		<div style="width:100%">边框渐变内容1</div>
    	<div style="width:100%">边框渐变内容2</div>
    	<div style="width:100%">边框渐变内容3</div>
    </div>
</div>
<h1 style="text-align:center">边框突变</h1>
<div class="mutation">
	<div style="width:100%; height:70px; margin-top:15px;">
		<div style="width:100%">边框突变内容1</div>
    	<div style="width:100%">边框突变内容2</div>
    	<div style="width:100%">边框突变内容3</div>
    </div>
</div>
</body>
</html>