Як я можу додати поле-тінь на одній стороні елемента?

Мені потрібно створити коробку-тінь на якомусь blockелементі, але лише (наприклад) з правого боку. Як я це роблю, це загортати внутрішній елемент box-shadowу зовнішній, padding-rightі overflow:hidden;тому три інші сторони тіні не видно.

Чи є якийсь кращий спосіб досягти цього? Як box-shadow-right?

EDIT : Мої наміри - створити лише вертикальну частину тіні. Точно так само, як repeat-yі в правилі background:url(shadow.png) 100% 0% repeat-y.

Так, ви можете використовувати властивість тіньового розповсюдження в правилі box-shadow:

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

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

Четверта властивість -2px- це поширення тіні, ви можете використовувати його для зміни поширення тіні, завдяки чому здається, що тінь знаходиться лише на одній стороні.

Це також використовує правила тіньового розміщення, 10pxнадсилає його вправо (горизонтальне зміщення) і 0pxтримає його під елементом (вертикальне зміщення.)

5px це радіус розмиття :)

Приклад для вас тут .

Моє саморобне рішення, яке легко редагувати:

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

додасть приємний тіньовий ефект зліва та справа елементів, які зазвичай складають документ.

Просто додайте тінь :: after або :: перед псевдоелементом. Зробіть 1 px і розташуйте його на будь-якій стороні, яку ви хочете. Нижче приклад зверху.

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;`

Це може бути простим способом

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

Призначте це будь-якому діві

Ось коден для демонстрації для кожної сторони або робочий фрагмент:

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

Цей сайт допоміг мені: 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

clip-pathзараз (2020 р.) - один із найпростіших способів досягти тіньових тіней на конкретних сторонах елементів, особливо коли необхідний ефект - це тінь "чистого крою" на окремих краях (на яку я вважаю, що спочатку шукала ОП), наприклад це:

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

... на відміну від ослабленої / зменшеної / стоншувальної тіні, як це:

.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(Apx Bpx Cpx Dpx);

Де:

• Apx встановлює видимість тіні для верхнього краю
• Bpx правильно
• Cpx дно
• Dpx зліва

Введіть значення 0 для будь-яких ребер, де тінь має бути прихованою, і від’ємне значення (те саме, що радіус розмиття поля - тінь - Xpx) для будь-яких країв, де має відображатися тінь.