CSS 테두리 혼합/투명도

Question

그래서이 테두리의 위쪽과 왼쪽을 배경으로 혼합하려고합니다. 즉 가장자리에 눈에 띄는 선이 보이지 않도록하려고합니다. 나는 border-shadow에 inset 값을 사용하여 테두리가 섞여있는 것처럼 보이지만 경계가 보이는 가장자리가있는 것처럼 보입니다.

참조하십시오 조각 :

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입니다.

Answer 1

당신은 같은 것으로 .para에 box-shadow을 조정할 수 있습니다 box-shadow: 45px 15px 70px #fff inset

그리고 텍스트는 회색의 상단에, 같은 .para 더 왼쪽 패딩을 추가 할 필요가있는 경우 : padding: 15px 15px 15px 40px;

.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 { 
 
     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 { 
 
\t font-size: 1.2em; 
 
\t text-decoration: underline; 
 
}

<article class="para"> 
 
\t \t \t \t \t <h2> X-cessive Overview </h2> 
 
\t \t \t \t 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. 
 

 
\t \t \t \t </article>