Как добавить тень к закругленным углам

Я пытаюсь добавить тень к окружности с помощьюКак добавить тень к закругленным углам

box-shadow: 1px 1px 3px 10px black;

, но он приходит с квадратной границей. Как добавить тень в круг.

.circle { 
 
    position: relative; 
 
    display: block; 
 
    margin: 2em 0; 
 
    background-color: transparent; 
 
    color: #fff; 
 
    text-align: center; 
 
    width: 40%; 
 
    margin: 0 auto; 
 
    box-shadow: 1px 1px 3px 10px black; 
 
    
 
} 
 

 
.circle:after { 
 
    display: block; 
 
    padding-bottom: 100%; 
 
    width: 100%; 
 
    height: 0; 
 
    border-radius: 50%; 
 
    background-color: #1E73BE; 
 
    content: ""; 
 
} 
 

 
.circle__inner { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.circle__wrapper { 
 
    display: table; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.circle__content { 
 
    display: table-cell; 
 
    padding: 1em; 
 
    vertical-align: middle; 
 
}

<div class="circle"> 
 
<div class="circle__inner"> 
 
<div class="circle__wrapper"> 
 
<div class="circle__content">This is responsive circle</div> 
 
</div> 
 
</div> 
 
</div>

источник

2015-10-15 wordpress user

Возможный дубликат [как установить тень для круглого изображения (CSS)] (http://stackoverflow.com/questions/9808253/how-to-set-shadow-for -round-imagecss) –

В вашем css, если вы используете border-radius для .circle, тогда вы получите то, что вам нужно. –

Добавить border-radius: 50%; в .circle

Jsfiddle

CSS

.circle { 
    position: relative; 
    display: block; 
    margin: 2em 0; 
    background-color: transparent; 
    color: #fff; 
    text-align: center; 
    width: 40%; 
    margin: 0 auto; 
    box-shadow: 1px 1px 3px 10px black; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%; 

}

источник

2015-10-15 04:21:47 Alex

Спасибо большое :) –

Добавить border-radius этот класс .circle

.circle { 
 
    position: relative; 
 
    display: block; 
 
    margin: 2em 0; 
 
    background-color: transparent; 
 
    color: #fff; 
 
    text-align: center; 
 
    width: 40%; 
 
    margin: 0 auto; 
 
    box-shadow: 1px 1px 3px 10px black; 
 
-webkit-border-radius: 50%; 
 
-moz-border-radius: 50%; 
 
    border-radius: 50%; 
 
    
 
} 
 

 
.circle:after { 
 
    display: block; 
 
    padding-bottom: 100%; 
 
    width: 100%; 
 
    height: 0; 
 
    border-radius: 50%; 
 
    background-color: #1E73BE; 
 
    content: ""; 
 
} 
 

 
.circle__inner { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.circle__wrapper { 
 
    display: table; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.circle__content { 
 
    display: table-cell; 
 
    padding: 1em; 
 
    vertical-align: middle; 
 
}

<div class="circle"> 
 
<div class="circle__inner"> 
 
<div class="circle__wrapper"> 
 
<div class="circle__content">This is responsive circle</div> 
 
</div> 
 
</div> 
 
</div>

источник

2015-10-15 04:22:29

Я предлагаю вам изменить подход и использовать position: absolute; для .circle__content:after псевдо-элемента. Окончательный код выглядит следующим образом:

.circle__content:after { 
    content: ""; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
    border-radius: 50%; 
    background-color: transparent; 
    z-index: -1; 
    box-shadow: 0 0 5px #000; 
}

источник

2015-10-15 04:23:54

Как добавить тень к закругленным углам

ответ

Смежные вопросы