1. CSS
body {
padding: 100px;
background: #09F;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 36px;
}
.textBorder {
position: relative;
z-index: 1;
}
.textBorder strong {
position: relative;
z-index: 5;
}
.textBorder span {
position: absolute;
z-index: 1;
top: 0;
left: 0;
color: #FFF;
font-weight: bold;
}
/* С помощью значений top и left регулируем толщину обводки */
.textBorder span.b1 {top: -3px;}
.textBorder span.b2 {left: 3px;}
.textBorder span.b3 {top: 3px;}
.textBorder span.b4 {left: -3px;}
.textBorder span.b5 {top: -2px;left: 2px;}
.textBorder span.b6 {top: 2px;left: 2px;}
.textBorder span.b7 {top: 2px;left: -2px;}
.textBorder span.b8 {top: -2px;left: -2px;}
2. Подключение jQuery
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
Данный код добавляем в раздел
3. JavaScript
<script type="text/javascript">
$(document).ready(function (){
var text = $('.textBorder strong').html();
var textinner = '<span class="b1">'+text+'</span>'+'<span class="b2">'+text+'</span>'+'<span class="b3">'+text+'</span>'+'<span class="b4">'+text+'</span>'+'<span class="b5">'+text+'</span>'+'<span class="b6">'+text+'</span>'+'<span class="b7">'+text+'</span>'+'<span class="b8">'+text+'</span>';
$('.textBorder').append(textinner);
});
</script>
Данный код, также, добавляем в раздел
4. HTML
<div class="textBorder">
<strong>Привет! Я текст с обводкой!</strong>
</div>
