그림자 효과

Question

그림자처럼 사용자 지정 효과를 얻으려고합니다. 색상 만 단색이 아니라 패턴입니다.

참조 예 이미지 :

나는 그림자와 함께 단색을 달성 할 수 있지만,이 결과를 얻을 수 있습니까?

Answer 1

당신은 당신이 이렇게하는 것을 바라는 경우 쉼표로 구분하여 여러 효과를 지정할 수 있습니다.

box-shadow

그러나 나는 또한 :after를 사용하여 적용 좋습니다 background-image: linear-gradient() 당신은이 효과를 달성하기 위해 CSS 그라데이션을 사용할 수 있습니다 그것은

Answer 2

https://codepen.io/dakata911/pen/VyZdpV

.box { 
    width: 200px; 
    height: 100px; 
    background: #000; 
    position: relative; 
} 

.box:after { 
    content: ''; 
    width: 200px; 
    height: 100px; 
    position: absolute; 
    left: 10px; 
    top: 10px; 
    background: red; 
    z-index: -1; 
} 

Answer 3

https://jsfiddle.net/zjymfubo/1/

<div class="stripe"></div> 

.stripe { 
    height:20px; 
    width:300px; 
    position: relative; 
    background-color: red; 
} 
.stripe:after { 
    content: ''; 
    height:20px; 
    width:300px; 
    position: absolute; 
    left: 5px; 
    top: 5px; 
    z-index:-1; 
    color: white; 
    background: repeating-linear-gradient(
    -45deg, 
    #606dbc, 
    #606dbc 5px, 
    #465298 5px, 
    #465298 10px 
); 
} 

Answer 4

에 :

<div class="container"></div> 

.container { 
    width: 250px; 
    height: 125px; 
    position: relative; 
    background: white; 
} 
.container::after { 
    content: ""; 
    position: absolute; 
    top: 20px; 
    left: 20px; 
    width: 100%; 
    height: 100%; 
background: repeating-linear-gradient(
    -45deg, 
    orange, 
    orange 5px, 
    white 5px, 
    white 10px 
); 
    z-index: -1; 
} 

0123을

여기에 Codepen 예가 있습니다.

Answer 5

사용 :

.shadow{ 
 
     height:50px; 
 
     width:300px; 
 
     position: relative; 
 
     background-color: #fafafa; 
 
    } 
 
    .shadow:after { 
 
     content: ''; 
 
     height:50px; 
 
     width:300px; 
 
     position: absolute; 
 
     left: 6px; 
 
     top: 6px; 
 
     z-index:-1; 
 
     color: #fff; 
 
     background: repeating-linear-gradient(
 
     -45deg, 
 
     #fff, 
 
     #fff 5px, 
 
     yellow 5px, 
 
     yellow 10px 
 
    ); 
 
    }

<div class="shadow"></div>