发表新帖
发表新帖

How can I add a box-shadow on one side of an element?

后端 未结
关注
13 1114
萌比男神i
萌比男神i 2020-11-28 17:34

I need to create a box-shadow on some block element, but only (for example) on its right side. The way I do it is to wrap the inner element with box-shado

相关标签:
13条回答
  • 孤独总比滥情好
    2020-11-28 17:51

    Here is my example:

    .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>

    0 讨论(0)
  • 广开言路
    2020-11-28 17:54

    Ok, here is one try more. Using pseudo elements and aplying the shadow-box porperty over them.

    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

    0 讨论(0)
  • 孤城傲影
    2020-11-28 17:57 
    div {
 border: 1px solid #666;
    width: 50px;
    height: 50px;
    -webkit-box-shadow: inset 10px 0px 5px -1px #888 ;
}
    0 讨论(0)
  • 隐瞒了意图╮
    2020-11-28 17:58

    My self-made solution which is easy to edit:

    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;
}​

    Demo:
    http://jsfiddle.net/jDyQt/103

    0 讨论(0)
  • 滥情空心
    2020-11-28 17:59

    Yes, you can use the shadow spread property of the box-shadow rule: 

    .myDiv
{
  border: 1px solid #333;
  width: 100px;
  height: 100px;
  box-shadow: 10px 0 5px -2px #888;
}
    <div class="myDiv"></div>

    The fourth property there -2px is the shadow spread, you can use it to change the spread of the shadow, making it appear that the shadow is on one side only.

    This also uses the shadow positioning rules 10px sends it to the right (horizontal offset) and 0px keeps it under the element (vertical offset.)

    5px is the blur radius :)

    Example for you here.

    0 讨论(0)
  • 伪装坚强ぢ
    2020-11-28 18:02

    This site helped me: https://gist.github.com/ocean90/1268328 (Note that on that site the left and right are reversed as of the date of this post... but they work as expected). They are corrected in the code below.

    <!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>
    0 讨论(0)
 看不清?
提交回复
热议问题