Главная / PHP программирование / Закругление уголков без использования изображений
Закругление уголков без использования изображений PDF Печать E-mail
Статьи - PHP программирование

Пример функций php, которые рисуют блоки с закругленными уголками радиуса 10 и 5 пикселей.

<?php

function showblock10(
$html = '',
$bgcolor = '#ddd',
$width = 'auto',
$height = 'auto'
)
{
$radius = 10;
$id = 's'.rand(0,9999).time();
echo '<style type="text/css">
';

for($i=1;$i<=$radius;$i++) {echo '.'.$id.'r'.$i; if($i!=$radius) echo ', ';}
echo '
{
display: block;
height: 1px;
overflow: hidden;
font-size:1px;
}
';
for($i=1;$i<=$radius;$i++){
echo '.'.$id.'r'.$i.' { margin: 0 '.$i.'px; }
';
}

echo '
#'.$id.'rounded-box-3 .'.$id.'inner-box, #'.$id.'rounded-box-3  b {
background-color: '.$bgcolor.';
}

.'.$id.'inner-box {
padding:1em;
}
</style>
';

echo '    
<div id="'.$id.'rounded-box-3">
<b class="'.$id.'r10"></b>
<b class="'.$id.'r7"></b>
<b class="'.$id.'r5"></b>
<b class="'.$id.'r4"></b>
<b class="'.$id.'r3"></b>
<b class="'.$id.'r2"></b>
<b class="'.$id.'r2"></b>
<b class="'.$id.'r1"></b>
<b class="'.$id.'r1"></b>
<b class="'.$id.'r1"></b>
<div class="'.$id.'inner-box">
'.$html.'
</div>
<b class="'.$id.'r1"></b>
<b class="'.$id.'r1"></b>
<b class="'.$id.'r1"></b>
<b class="'.$id.'r2"></b>
<b class="'.$id.'r2"></b>
<b class="'.$id.'r3"></b>
<b class="'.$id.'r4"></b>
<b class="'.$id.'r5"></b>
<b class="'.$id.'r7"></b>
<b class="'.$id.'r10"></b>                                
</div>    
';    

return;
}

function showblock5(
$html = '',
$bgcolor = '#ddd',
$width = 'auto',
$height = 'auto'
)
{
$radius = 5;
$id = 's'.rand(0,9999).time();
echo '<style type="text/css">
';

for($i=1;$i<=$radius;$i++) {echo '.'.$id.'r'.$i; if($i!=$radius) echo ', ';}
echo '
{
display: block;
height: 1px;
overflow: hidden;
font-size:1px;
}
';
for($i=1;$i<=$radius;$i++){
echo '.'.$id.'r'.$i.' { margin: 0 '.$i.'px; }
';
}

echo '
#'.$id.'rounded-box-3 .'.$id.'inner-box, #'.$id.'rounded-box-3  b {
background-color: '.$bgcolor.';
}

.'.$id.'inner-box {
padding:1em;
}
</style>
';

echo '    
<div id="'.$id.'rounded-box-3">
<b class="'.$id.'r5"></b>
<b class="'.$id.'r3"></b>
<b class="'.$id.'r2"></b>
<b class="'.$id.'r1"></b>
<b class="'.$id.'r1"></b>
<div class="'.$id.'inner-box">
'.$html.'
</div>
<b class="'.$id.'r1"></b>
<b class="'.$id.'r1"></b>
<b class="'.$id.'r2"></b>
<b class="'.$id.'r3"></b>
<b class="'.$id.'r5"></b>                                
</div>    
';    

return;
}

showblock10('111111', 'red');
echo '<br/>';
showblock5('111111', 'green');

?>
 

Добавить комментарий


Защитный код
Обновить