요소의 한쪽에 상자 그림자를 추가하려면 어떻게 해야 합니까?

요소의 한쪽에 상자 그림자를 추가하려면 어떻게 해야 합니까?

나는 몇 개의 상자에 그림자를 만들어야 합니다.block(예를 들어) 요소만 오른쪽에 있습니다.제가 하는 방법은 내부의 요소를 에워싸는 것입니다.box-shadow와 함께 바깥쪽으로padding-right그리고.overflow:hidden;그래서 그림자의 다른 세 면은 보이지 않습니다.

이를 달성하기 위한 더 나은 방법이 있습니까?맘에 들다box-shadow-right?

편집: 그림자의 세로 부분만 만드는 것이 제 의도입니다.정확히 무엇과 똑같습니다.repeat-y규칙상의background:url(shadow.png) 100% 0% repeat-y그럼 됩니다.

예, 상자 그림자 규칙의 그림자 확산 속성을 사용할 수 있습니다.

.myDiv
{
  border: 1px solid #333;
  width: 100px;
  height: 100px;
  box-shadow: 10px 0 5px -2px #888;
}

<div class="myDiv"></div>

그곳의 네번째 재산은-2px그림자가 퍼지면 그림자의 퍼짐을 변경하여 그림자가 한쪽에만 있는 것처럼 보이게 할 수 있습니다.

그림자 위치 지정 규칙도 사용합니다.10px오른쪽(horizon 오프셋)으로 전송하고0px요소 아래에 유지합니다(vertical 오프셋).

5px블러 반경입니다 :)

예를 들어보세요.

clip-path현재(2020년)는 요소의 특정 측면에서 상자 그림자를 얻을 수 있는 가장 간단한 방법 중 하나입니다. 특히 필요한 효과가 특정 가장자리의 "깨끗한" 그림자일 때(OP가 원래 찾던 것이라고 생각합니다), 다음과 같습니다.

.shadow-element {
    border: 1px solid #333;
    width: 100px;
    height: 100px;
    box-shadow: 0 0 15px rgba(0,0,0,0.75);
    clip-path: inset(0px -15px 0px 0px);
}

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

...이처럼 약해진/reduced/thinning 그림자와 대조적으로:

.shadow-element {
    border: 1px solid #333;
    width: 100px;
    height: 100px;
    box-shadow: 15px 0px 15px -10px rgba(0,0,0,0.75);
}

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

해당 요소에 다음 CSS를 적용하기만 하면 됩니다.

box-shadow: 0 0 Xpx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Tpx Rpx Bpx Lpx);

위치:

• Tpx상단 가장자리의 그림자 가시성을 설정합니다.
• Rpx맞다
• Bpx맨 아래
• Lpx왼쪽

음영을 숨겨야 하는 모든 에지에 대해 0의 값을 입력하고 음의 값을 입력합니다(상자 그림자 블러 반경과 동일).Xpx그림자가 표시되어야 하는 모든 가장자리에 표시됩니다.

편집하기 쉬운 자체 솔루션:

HTML:

<div id="anti-shadow-div">
    <div id="shadow-div"></div>
</div>​

CSS:

#shadow-div{
    margin-right:20px; /* Set to 0 if you don't want shadow at the right side */
    margin-left:0px; /* Set to 20px if you want shadow at the left side */
    margin-top:0px; /* Set to 20px if you want shadow at the top side */
    margin-bottom:0px; /* Set to 20px if you want shadow at the bottom side */
    box-shadow: 0px 0px 20px black; 
    height:100px;
    width:100px;
    background: red;
}

#anti-shadow-div{
    margin:20px;
    display:table;
    overflow:hidden;
}​

데모:
http://jsfiddle.net/jDyQt/103

최대 두 변에서 잘라내기 효과를 얻으려면 배경 그라디언트가 있는 유사 요소를 사용할 수 있습니다.

header::before, main::before, footer::before, header::after, main::after, footer::after {
    display:    block;
    content:    '';
    position:   absolute;
    width:      8px;
    height:     100%;
    top:        0px;
}

header::before, main::before, footer::before {
    left:       -8px;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

header::after, main::after, footer::after {
    right:      -8px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

는 보통 문서를 구성하는 요소의 왼쪽과 오른쪽에 멋진 그림자 같은 효과를 추가합니다.

섀도를 추가하려면 pseudo 요소 앞에 :: 또는 ::를 사용하면 됩니다.1px로 만들어서 원하는 쪽에 배치해주세요.아래는 top의 예입니다.

footer {
   margin-top: 50px;
   color: #fff;
   background-color: #009eff;
   text-align: center;
   line-height: 90px;
   position: relative;
}

footer::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    top: 0;
    left: 0;
    z-index: -1;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.75);
}

<footer>top only box shadow</footer>

다음은 제 예입니다.

.box{
        
        width: 400px; 
        height: 80px; 
        background-color: #C9C; 
        text-align: center; 
        font: 20px normal Arial, Helvetica, sans-serif; 
        color: #fff; 
        padding: 100px 0 0 0;
        -webkit-box-shadow: 0 8px 6px -6px black;
           -moz-box-shadow: 0 8px 6px -6px black;
                box-shadow: 0 8px 6px -6px black;
    }

<div class="box">
</div>

여기 제가 한 작은 해킹이 있습니다.

<div id="element"><!--element that I want an one-sided inset shadow from the bottom--></div> 
<div class="one_side_shadow"></div>

1.만들기<div class="one_side_shadow"></div>원사이드 박스 섀도를 생성할 요소 바로 아래(이 경우 원사이드 인셋 섀도:id="element"아래쪽에서)

2.그 다음에 규칙을 만들었습니다.box-shadow음의 수직 오프셋을 사용하여 그림자를 한쪽으로 밀어 올립니다.

`box-shadow: 0 -8px 20px 2px #DEDEE3;`

다음은 각 면에 대해 설명할 코드 펜 또는 작동하는 스니펫입니다.

.boxes {
  display: flex;
  flex-wrap: wrap;
}

.box {
  margin: 20px;
  border: 1px solid #ccc;
  font-family: Helvetica Neue, Arial, sans-serif;
  font-weight: 100;
  letter-spacing: 2px;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  padding: 40px;
  line-height: 1.4em;
}

.top {
  box-shadow: 0 -5px 5px -5px #333;
}

.right {
  box-shadow: 5px 0 5px -5px #333;
}

.bottom {
  box-shadow: 0 5px 5px -5px #333;
}

.left {
  box-shadow: -5px 0 5px -5px #333;
}

<div class="boxes">
  <div class="box top">Top Only</div>
  <div class="box right">Right Only</div>
  <div class="box bottom">Bottom Only</div>
  <div class="box left">Left Only</div>
</div>

이것은 간단한 방법일 수 있습니다.

border-right : 1px solid #ddd;
height:85px;    
box-shadow : 10px 0px 5px 1px #eaeaea;

임의의 디바에 할당

이 사이트는 나를 도와줬습니다: https://gist.github.com/ocean90/1268328 (이 게시물의 날짜를 기준으로 그 사이트에서 왼쪽과 오른쪽이 반대로 되어 있다는 것에 유의하십시오...하지만 예상대로 작동합니다.아래 코드로 수정하였습니다.

<!DOCTYPE html>
<html>
    <head>
        <title>Box Shadow</title>

        <style>
            .box {
                height: 150px;
                width: 300px;
                margin: 20px;
                border: 1px solid #ccc;
            }

            .top {
                box-shadow: 0 -5px 5px -5px #333;
            }

            .right {
                box-shadow: 5px 0 5px -5px #333;
            }

            .bottom {
                box-shadow: 0 5px 5px -5px #333;
            }

            .left {
                box-shadow: -5px 0 5px -5px #333;
            }

            .all {
                box-shadow: 0 0 5px #333;
            }
        </style>
    </head>
    <body>
        <div class="box top"></div>
        <div class="box right"></div>
        <div class="box bottom"></div>
        <div class="box left"></div>
        <div class="box all"></div>
    </body>
</html>

div {
 border: 1px solid #666;
    width: 50px;
    height: 50px;
    -webkit-box-shadow: inset 10px 0px 5px -1px #888 ;
}

그림자를 위한 수직 블록을 만들고 블록 요소가 있어야 할 위치 옆에 배치합니다.그런 다음 두 블록이 다른 블록으로 감깁니다.

<div id="wrapper">
    <div id="shadow"></div>  
    <div id="content">CONTENT</div>  
</div>

<style>

div#wrapper {
  width:200px;
  height:258px;      
}

div#wrapper > div#shadow {
  display:inline-block;
  width:1px;
  height:100%;
  box-shadow: -3px 0px 5px 0px rgba(0,0,0,0.8)
}

div#wrapper > div#content {
  display:inline-block;
  height:100%;
  vertical-align:top;
}

</style>

jsFiddle 예제입니다.

네, 한 번 더 해보겠습니다.유사 요소를 사용하고 그 위에 섀도 박스 속성을 적용합니다.

html:

<div class="no-relevant-box">
  <div class="div-to-shadow-1"></div>
  <div class="div-to-shadow-2"></div>
</div>

sass:

.div-to-shadow-1, .div-to-shadow-2
  height: 150px
  width: 150px
  overflow: hidden
  transition: all 0.3s ease-in-out
  &::after
    display: block
    content: ''
    position: relative
    top: 0
    left: 100%
    height: 100%
    width: 10px
    border: 1px solid mediumeagreen
    box-shadow:  0px 7px 12px rgba(0,0,0,0.3)
  &:hover
    border: 1px solid dodgerblue
    overflow: visible

https://codepen.io/alex3o0/pen/PrMyNQ

언급URL : https://stackoverflow.com/questions/5115427/how-can-i-add-a-box-shadow-on-one-side-of-an-element