html - CSS边界融合/透明度

所以我试图使该边框的顶部和左侧融入背景，即沿边缘没有可见的线。我正在使用边框阴影上的插入值来显示这些边缘融合在一起，尽管边框似乎在可见边缘。

请参阅摘要：

HTML：

<article class="para">
    <h2> X-cessive Overview </h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium lectus eget risus tempor eleifend. Nulla facilisi. Mauris non ultrices mi, in tristique enim. Nulla facilisi. Nullam dapibus consectetur eros, sed eleifend ligula tincidunt id. Curabitur non velit non elit volutpat accumsan iaculis id elit. Nullam quis tortor maximus, laoreet sapien id, gravida nibh. Nunc tempor justo gravida magna sodales euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi et diam suscipit, varius ante sagittis, bibendum dolor. Nunc pellentesque molestie.
</article>

CSS：

.main {
	background-image: url(../images/backgrounds/exile-main1.png);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 400px;
	color: #000;
	border-bottom: 2px solid #939799;
}
.main h1 {
	position: relative;
	top: 40px;
	left: 30px;
	color: #424040;
	font-size: 2em;
}
.para {
	width: 33%;
	border-right: 2px solid rgb(237,36,62);
	border-bottom: 2px solid rgb(237,36,62);
	border-top: 10px transparent;
	border-left: 10px transparent;
	padding: 15px;
	position: relative;
	left: 140px;
	top: 110px;
	font-size: 1em;
	border-radius: 20px 20px 20px 20px;
	box-shadow: 20px 20px 60px #fff inset;
	background-color: #939799;
}
.para h2 {
	font-size: 1.2em;
	text-decoration: underline;
}

<article class="para">
    <h2> X-cessive Overview </h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium lectus eget risus tempor eleifend. Nulla facilisi. Mauris non ultrices mi, in tristique enim. Nulla facilisi. Nullam dapibus consectetur eros, sed eleifend ligula tincidunt id. Curabitur non velit non elit volutpat accumsan iaculis id elit. Nullam quis tortor maximus, laoreet sapien id, gravida nibh. Nunc tempor justo gravida magna sodales euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi et diam suscipit, varius ante sagittis, bibendum dolor. Nunc pellentesque molestie.
</article>

这是Screenshot，因此您可以更好地看到此问题。

最佳答案

您可以将box-shadow上的.para调整为类似以下内容：box-shadow: 45px 15px 70px #fff inset

如果文本需要位于灰色顶部，请向.para添加更多的左侧填充，例如：padding: 15px 15px 15px 40px;

.main {
	background-image: url(../images/backgrounds/exile-main1.png);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 400px;
	color: #000;
	border-bottom: 2px solid #939799;
}
.main h1 {
	position: relative;
	top: 40px;
	left: 30px;
	color: #424040;
	font-size: 2em;
}
.para {
        width: 33%;
        border-right: 2px solid rgb(237,36,62);
        border-bottom: 2px solid rgb(237,36,62);
        border-top: 10px transparent;
        border-left: 10px transparent;
        padding: 15px 15px 15px 46px; /* Adjust this */
        position: relative;
        left: 140px;
        top: 110px;
        font-size: 1em;
        border-radius: 0 20px 20px 20px; /* Adjust this */
        box-shadow: 45px 15px 70px #fff inset; /* Adjust this*/
        background-color: #939799;
}
.para h2 {
	font-size: 1.2em;
	text-decoration: underline;
}

<article class="para">
					<h2> X-cessive Overview </h2>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium lectus eget risus tempor eleifend. Nulla facilisi. Mauris non ultrices mi, in tristique enim. Nulla facilisi. Nullam dapibus consectetur eros, sed eleifend ligula tincidunt id. Curabitur non velit non elit volutpat accumsan iaculis id elit. Nullam quis tortor maximus, laoreet sapien id, gravida nibh. Nunc tempor justo gravida magna sodales euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi et diam suscipit, varius ante sagittis, bibendum dolor. Nunc pellentesque molestie.

				</article>

关于html - CSS边界融合/透明度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39430186/