CSS邊界融合/透明度

Question

因此，我嘗試使該邊框的頂部和左側與背景融合，即沿邊緣沒有可見的線。 我正在使用邊框陰影上的插入值來顯示這些邊緣融合在一起，盡管邊框似乎在可見邊緣。

請參閱摘要：

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> 

這是一個屏幕截圖，因此您可以更好地看到問題。

Answer 1

您可以將.para上的box-shadow調整為類似以下內容： 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>