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

Скругление углов с помощью CSS3

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

<style type="text/css">
.panels {
display: block;
width: 300px;
margin: 100px auto;
padding: 0;
}
.panels li {
display: block;
list-style: none;
margin-bottom: 10px;
}
.panels li span {
display: block;
font-size: 0;
line-height: 0;
}
.panels li span, .panels li div {
background: #74c44c;
}
.panels li div {
padding: 10px;
color: #fff;
font: 14px/18px Verdana, Arial, Helvetica, sans-serif;
text-align: center;
}
.sp1 {
height: 1px;
margin: 0 5px;
}
.sp2 {
height: 1px;
margin: 0 3px;
}
.sp3 {
height: 1px;
margin: 0 2px;
}
.sp4 {
height: 2px;
margin: 0 1px;
}
</style>

<h1>Скругление углов с помощью CSS3</h1>
<ul class="panels">
<li>
	<span class="sp1"></span>
	<span class="sp2"></span>
	<span class="sp3"></span>
	<span class="sp4"></span>
	<div>Panel 1 Content</div>
	<span class="sp4"></span>
	<span class="sp3"></span>
	<span class="sp2"></span>
	<span class="sp1"></span>
</li>
<li>
	<span class="sp1"></span>
	<span class="sp2"></span>
	<span class="sp3"></span>
	<span class="sp4"></span>
	<div>Panel 2 Content</div>
	<span class="sp4"></span>
	<span class="sp3"></span>
	<span class="sp2"></span>
	<span class="sp1"></span>
</li>
<li>
	<span class="sp1"></span>
	<span class="sp2"></span>
	<span class="sp3"></span>
	<span class="sp4"></span>
	<div>Panel 3 Content</div>
	<span class="sp4"></span>
	<span class="sp3"></span>
	<span class="sp2"></span>
	<span class="sp1"></span>
</li>
</ul>


. Полотенце

© Copyright 2008-2016 by KDG