Мне нужно реализовать теневой эффект, как показано ниже приложенным макетом. Я выделил теневой эффект, который мне нужно реализовать как красную рамку. Мне было сказано использовать изображение спрайта для реализации этого теневого эффекта, который мне не нравится. Могу ли я использовать теневой эффект CSS3 для его реализации?Эффект тени с использованием CSS
Пожалуйста, советы
попробовать это:
hr {
height: 1px;
margin: 50px 0;
background: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(0,0,0,0)), color-stop(0.5, #333333), to(rgba(0,0,0,0)));
background: -webkit-linear-gradient(left, rgba(0,0,0,0), #333333, rgba(0,0,0,0));
background: -moz-linear-gradient(left, rgba(0,0,0,0), #333333, rgba(0,0,0,0));
background: -o-linear-gradient(left, rgba(0,0,0,0), #333333, rgba(0,0,0,0));
background: linear-gradient(left, rgba(0,0,0,0), #333333, rgba(0,0,0,0));
border: 0;
}
hr:after {
display: block;
content:'';
height: 30px;
background: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 116, color-stop(0%, #cccccc), color-stop(100%, rgba(255, 255, 255, 0)));
background: -webkit-radial-gradient(center top, farthest-side, #cccccc 0%, rgba(255, 255, 255, 0) 100%);
background: -moz-radial-gradient(center top, farthest-side, #cccccc 0%, rgba(255, 255, 255, 0) 100%);
background: -o-radial-gradient(center top, farthest-side, #cccccc 0%, rgba(255, 255, 255, 0) 100%);
background: radial-gradient(farthest-side at center top, #cccccc 0%, rgba(255, 255, 255, 0) 100%);
}<hr>
Посмотрите на это https://css-tricks.com/almanac/properties/b/box-shadow/ – Akshay
** Да ** вы можете использовать 'CSS3' для этого. Мы можем посоветовать вам больше, если вы сможете показать свои усилия. – Manwal
http://cssdeck.com/labs/different-css3-box-shadows-effects? Сначала научитесь Google, всегда ... –