как добавить границу изображения вокруг изображения?

Есть ли простой способ добавить границу изображения вокруг изображения?

Причина в том, что я хочу создать эффект тени для изображения.

Изображения загружаются как миниатюры и являются 110×75 px … Я думаю о создании границы тени, но не знаю, как добавить это вокруг изображения, кто-нибудь знает способ?

PHP предпочтительнее …

Вы можете использовать библиотеку GD или ImageMagick для изменения фактического изображения на PHP, но вы также можете добиться аналогичного эффекта в CSS, если это требуется только на веб-странице.

Здесь есть полный учебник по PHP и GD:

  • Добавление Drop Shadows с помощью PHP
function addBorderpng($add){ $border=5; $im=imagecreatefrompng($add); $width=imagesx($im); $height=imagesy($im); $img_adj_width=$width+(2*$border); $img_adj_height=$height+(2*$border); $newimage=imagecreatetruecolor($img_adj_width,$img_adj_height); $border_color = imagecolorallocate($newimage, 255, 255, 255); imagefilledrectangle($newimage,0,0,$img_adj_width, $img_adj_height,$border_color); imagecopyresized($newimage,$im,$border,$border,0,0, $width,$height,$width,$height); imagepng($newimage,$add,9); chmod("$add",0666); } 

Для создания этого эффекта вам понадобится использовать CSS. Существует несколько вариантов.

  .img{ border-top:none; border-left:none; border-right:solid 2px #dddddd; border-bottom:solid 2px #dddddd; } 

является самым простым, но он не выглядит таким замечательным.

Чтобы сделать еще лучшие тени, вы можете использовать плагин для jQuery, например плагин shadow. Он создает хорошие эффекты тени для любого элемента на странице.

Если это просто визуальные спринклеры, вы можете попробовать свойство CSS3 box-shadow. Он будет работать только на Firefox, Safari и Chrome, поэтому это всего лишь «прогрессивное улучшение». Это руководство должно помочь.

В качестве альтернативы вы можете использовать этот CSS для базового эффекта. gallery – это любое имя класса, которое вы передаете элементу, окружающему изображения (т. е. через <div class="gallery">...</div> ). Ширина / высота необязательны, но если изображения имеют одинаковый размер, лучше использовать CSS вместо атрибутов width / height на самих изображениях.

 .gallery img { width: 100px; height: 75px; border-width: 0 3px 3px 0; border-style: solid; border-color: #ccc; } 

Лучшее решение:

 function addBorderpng ($ add, $ bdr = 1, $ color = '# 000000') {
     $ arr = explode ('.', $ add);
     $ extension = strtolower (end ($ arr));
     $ Граница = $ BDR;
     if ($ extension == 'jpg') {
         $ Им = imagecreatefromjpeg ($ добавь);
     }
     else if ($ extension == 'png') {
         $ Им = imagecreatefrompng ($ добавь);
     }
     $ Ширина = imagesx ($ им);
     $ Высота = imagesy ($ им);
     $ Img_adj_width = $ ширина + (2 * $ граница); 
     $ Img_adj_height = $ высота + (2 * $ граница);
     $ Newimage = imagecreatetruecolor ($ img_adj_width, $ img_adj_height);

     $ color_gb_temp = HexToRGB ($ color);
     $ border_color = imagecolorallocate ($ newimage, $ color_gb_temp ['r'], $ color_gb_temp ['g'], $ color_gb_temp ['b']);
     ImageFilledRectangle ($ newimage, 0,0, $ img_adj_width, $ img_adj_height, $ border_color);

     imagecopyresized ($ newimage, $ им, $ границы, $ границы, 0,0, ширина $, $ высота, ширина $, $ высота); 
     header ('Content-type: image / jpeg');
     if ($ extension == 'jpg')
         imagejpeg ($ newimage, $ добавить, 9);
     else if ($ extension == 'png')
         imagepng ($ newimage, $ добавить, 9);
      // imagepng ($ newimage);
     // CHMOD ( "$ добавить", 0666);

 }
  функция HexToRGB ($ hex) {
         $ hex = ereg_replace ("#", "", $ hex);
         $ color = array ();

         if (strlen ($ hex) == 3) {
         $ color ['r'] = hexdec (substr ($ hex, 0, 1). $ r);
         $ color ['g'] = hexdec (substr ($ hex, 1, 1). $ g);
         $ color ['b'] = hexdec (substr ($ hex, 2, 1). $ b);
         }
         else if (strlen ($ hex) == 6) {
         $ color ['r'] = hexdec (substr ($ hex, 0, 2));
         $ color ['g'] = hexdec (substr ($ hex, 2, 2));
         $ color ['b'] = hexdec (substr ($ hex, 4, 2));
         }
         return $ color;
  }
 addBorderpng ( 'shahid.png', 5);

добавить границу вокруг изображения по php GD

 <?php $img_src = '3.jpg'; $img = imagecreatefromjpeg($img_src); $color = imagecolorallocate($img, 132, 15, 153); $borderThickness = 10; drawBorder($img, $color, $borderThickness); function drawBorder(&$img, &$color, $thickness) { $x1 = 0; $y1 = 0; $x2 = imagesx($img) - 1; $y2 = imagesy($img) - 1; for($i = 0; $i < $thickness; $i++) { imagerectangle($img, $x1++, $y1++, $x2--, $y2--, $color); } } header('Content-type: image/jpeg'); imagejpeg($img); ?> 

и Добавить Borer в изображение с помощью CSS

 .border { width: 100px; height: 75px; border : 3px solid rgb(132, 15, 153); } <img src='3.jpg' class='border'> 

Если вы хотите сделать это с помощью PHP, попробуйте библиотеку PHP GD: http://php.net/manual/en/book.image.php

Использование CSS было бы проще, используя свойство border .