AAA Главная
Примеры PHP Примеры JavaScript Примеры Ajax Примеры CSS,HTML

Эффект угловой рамки

Рамка только по углам

Исходный код этого примера:

<style>
    .wrap {
        text-align: center;
    }
    .wrap div {
        width: 300px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        display: inline-block;
        font-size: 18px;
        background-image: linear-gradient(to right, #191 20px, transparent 20px, transparent 280px, #191 280px),
        linear-gradient(to right, #191 20px, transparent 20px, transparent 280px, #191 280px),
        linear-gradient(to bottom, #191 20px, transparent 20px, transparent 80px, #191 80px),
        linear-gradient(to bottom, #191 20px, transparent 20px, transparent 80px, #191 80px);
        background-size: 100% 5px, 100% 5px, 5px 100%, 5px 100%;
        background-position: 0 0, 0 100%, 0 0, 100% 0;
        background-repeat: no-repeat;
    }
</style>
<div class="wrap">
    <div>Рамка только по углам</div>
</div>


.

© Copyright 2008-2019 by KDG



Rambler's Top100