Размытие границ изображения через css

html
Вопрос:Я пытаюсь сделать что-то вроде этого: Я думаю, что это можно сделать, используя фоновое изображение и другое изображение (маску) над ним с прозрачным центром. Но возможно ли сделать то же самое с чистым css? Лучший ответ: Пока вы не можете применить box-shadow непосредственно к изображению, вы можете применить его с помощью :before or :after HTML

Вопрос:

Я пытаюсь сделать что-то вроде этого:

example

Я думаю, что это можно сделать, используя фоновое изображение и другое изображение (маску) над ним с прозрачным центром. Но возможно ли сделать то же самое с чистым css?

Лучший ответ:

Пока вы не можете применить box-shadow непосредственно к изображению, вы можете применить его с помощью :before or :after

HTML

<div class=»shadow»> <img src=»http://lorempixel.com/400/200/» /> </div>

CSS

.shadow { display:block; position:relative; } img { width: 100%; height: 100%; } .shadow:before { display:block; content:»; position:absolute; width:100%; height:100%; -moz-box-shadow:inset 0px 0px 3px 1px rgba(0,0,0,1); -webkit-box-shadow:inset 0px 0px 3px 1px rgba(0,0,0,1); box-shadow:inset 0px 0px 3px 1px rgba(0,0,0,1); } Ответ №1

Возможно, так:

.img { border:1px solid black; } .img:hover { border: none; box-shadow: 0 0 10px black inset; }

Оцените статью
Добавить комментарий