この境界線の上端と左端を背景にブレンドして、つまりエッジに沿って目に見える線がないようにしようとしています。私はボーダーシャドウのインセット値を使って、これらのエッジが混ざり合っているように見せていますが、ボーダーが見えるエッジがあるようです。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 {
\t background-image: url(../images/backgrounds/exile-main1.png);
\t background-size: cover;
\t background-repeat: no-repeat;
\t width: 100%;
\t height: 400px;
\t color: #000;
\t border-bottom: 2px solid #939799;
}
.main h1 {
\t position: relative;
\t top: 40px;
\t left: 30px;
\t color: #424040;
\t font-size: 2em;
}
.para {
\t width: 33%;
\t border-right: 2px solid rgb(237,36,62);
\t border-bottom: 2px solid rgb(237,36,62);
\t border-top: 10px transparent;
\t border-left: 10px transparent;
\t padding: 15px;
\t position: relative;
\t left: 140px;
\t top: 110px;
\t font-size: 1em;
\t border-radius: 20px 20px 20px 20px;
\t box-shadow: 20px 20px 60px #fff inset;
\t background-color: #939799; \t
}
.para h2 {
\t font-size: 1.2em;
\t 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です。
シャドウオフセットを増やしても問題は解決しないのですか? – vals
はい、インセットを調整して固定しました。私はこれを試したことはありません:)、今は左上の円形マークを削除する必要があります。 – Ricky