Как создать несколько границ на IMG? - PullRequest
Новая
       0

Как создать несколько границ на IMG?

0 голосов
/ 27 марта 2012

Я хочу добавить несколько границ на одном изображении.Возможно ли это через CSS?

Пример: http://imageshack.us/photo/my-images/31/multiplebg.jpg/

Ответы [ 5 ]

2 голосов
/ 27 марта 2012

В настоящее время невозможно создать более одной границы в CSS. Вы можете подделать три границы с помощью , используя некоторые умные методы затенения css3 . 

div
{
    margin: 10px;
    border: 2px solid #f00;
    box-shadow:inset 0px 0px 2px 2px #0f0, 0px 0px 2px 5px #00f;
}

Но я бы просто добавил границы к изображению, поскольку это не поддерживается IE. (Может быть, IE9 поддерживает это.)

1 голос
/ 27 марта 2012

Вложите свой <img> в несколько контейнеров и примените границу к каждому 

<div id="b1">

    <div id="b2">

        <div id="b3">
            <img src="" />
        </div> 

    </div> 

</div>

Затем примените границу к каждому, как 

#b1 { border: 1px #000 solid; }
#b2 { border: 1px #f00 solid; }
#b3 { border: 1px #0f0 solid; }
img { border: 1px #00f solid; }

Или

Используйте изображение с несколькими границами и используйте border-image свойство

0 голосов
/ 27 марта 2012

Shadow пока не поддерживает браузеры.

Самый простой (и удобный для браузеров) способ - использовать комбинацию отступов и границ.

Пример: 

<img src="<path>" class="doubleBorder" />

И CSS: 

.doubleBorder {
padding: 10px; background: orange;
border: 5px solid green;
}

Надеюсь, это поможет.

0 голосов
/ 27 марта 2012

Да, возможно, клещ ....

Смотрите здесь 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

#full-border5 {
    background: none repeat scroll 0 0 #FF9600;
    border: 5px solid #FF0000;
    padding: 40px;
    position: relative;
    z-index: 10;
}
#full-border5:before {
    background: none repeat scroll 0 0 #4AA929;
    border: 5px solid #FFEA00;
    bottom: 5px;
    content: "";
    display: block;
    left: 5px;
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: -1;
}
#full-border5:after {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 5px solid #F000FF;
    bottom: 25px;
    content: "";
    display: block;
    left: 25px;
    position: absolute;
    right: 25px;
    top: 25px;
    z-index: -1;
}
#full-border5 p:first-child {
    margin-top: 0;
}
#full-border5 p:first-child:before {
    background: none repeat scroll 0 0 #7200FF;
    border: 5px solid #00B4FF;
    bottom: 15px;
    content: "";
    display: block;
    left: 15px;
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: -1;
}


</style>

</head>

<body>

<div id="full-border5">
           <img src="slider_img8.jpg" width="145" height="214" />
</div>
</body>
</html>
0 голосов
/ 27 марта 2012

Легко, с помощью CSS3 это очень простая проблема, которую нужно решить.

Если вы используете "контур", подходящий для вашей конкретной ситуации, не бойтесь его использовать.

http://tinkerbin.com/tCGF0mfW

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...