Блог

Главная - Вопросы по программированию - Как добавить выцветшие границы к внутренней части сетки?

Как добавить выцветшие границы к внутренней части сетки?

#html #css #twitter-bootstrap #bootstrap-4

#HTML #css #twitter-bootstrap #bootstrap-4

Вопрос:

В настоящее время я работаю над веб-сайтом в Bootstrap 4 на основе дизайна. Есть один элемент, который я не могу придумать, как подойти к этому в CSS.

Я могу легко создать сетку и содержимое. Проблема заключается в наложении эффекта выцветания на каждую из границ

Изображение сетки bootstrap 4

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-12 mb-5 px-2 px-md-5">
    <div class="row justify-content-center text-center">
        <div class="col-12 col-md-3 px-4">
            <img src="https://image.prntscr.com/image/NMnvaTiNRxi61-XRT5ss_g.png" class="img-fluid p-3" alt="Icon of the AMT tick in a circle">
            <h5 class="red pr-0"> It has 3  months MOT </h5>
        </div>
        <div class="col-12 col-md-3 px-4">
            <img src="https://image.prntscr.com/image/NMnvaTiNRxi61-XRT5ss_g.png" class="img-fluid p-3 d-none d-md-inline-block" alt="Icon of the AMT tick in a circle">
            <h5 class="red pr-0"> It is not an import </h5>
        </div>
        <div class="col-12 col-md-3 px-4">
            <img src="https://image.prntscr.com/image/NMnvaTiNRxi61-XRT5ss_g.png" class="img-fluid p-3 d-none d-md-inline-block" alt="Icon of the AMT tick in a circle">       
            <h5 class="red pr-0"> It is not an insurance write off </h5>
        </div>
        <div class="col-12 col-md-3 px-4">
            <img src="https://image.prntscr.com/image/NMnvaTiNRxi61-XRT5ss_g.png" class="img-fluid p-3 d-none d-md-inline-block" alt="Icon of the AMT tick in a circle">
            <h5 class="red pr-0"> It has never been used for private/commercial hire, rental, driving tuition </h5>
        </div>
        <div class="col-12 col-md-3 px-4">
            <img src="https://image.prntscr.com/image/NMnvaTiNRxi61-XRT5ss_g.png" class="img-fluid p-3 d-none d-md-inline-block" alt="Icon of the AMT tick in a circle">
            <h5 class="red pr-0"> It has no serious mechanical issues </h5>
        </div>
        <div class="col-12 col-md-3 px-4">
            <img src="https://image.prntscr.com/image/NMnvaTiNRxi61-XRT5ss_g.png" class="img-fluid p-3 d-none d-md-inline-block" alt="Icon of the AMT tick in a circle">
            <h5 class="red pr-0"> You have the V5 in your name </h5>
        </div>
        <div class="col-12 col-md-3 px-4">
            <img src="https://image.prntscr.com/image/NMnvaTiNRxi61-XRT5ss_g.png" class="img-fluid p-3 d-none d-md-inline-block" alt="Icon of the AMT tick in a circle">
            <h5 class="red pr-0"> It has full service history </h5>
        </div>
        <div class="col-12 col-md-3 px-4">
            <img src="https://image.prntscr.com/image/NMnvaTiNRxi61-XRT5ss_g.png" class="img-fluid p-3 d-none d-md-inline-block" alt="Icon of the AMT tick in a circle">
            <h5 class="red pr-0">It has no more than 50,000 miles</h5>
        </div>
    </div>
</div>