Advanced Search

Return to Snippet

Revision: 4788
at January 21, 2008 03:47 by DeadLy
Initial Code 
<style>
* {margin: 0; padding: 0}
body {
  font: 14px/17px "Trebuchet MS", tahoma, arial;
	text-align: justify;
}
a {color: #0094D6}
p {
	text-align: center;
	margin-top: 30px;
	font-weight: bold;
	font-size: 13px;
}
#v3 {
  width: 500px;
	margin: 30px auto 15px;
}
h1 {
	font-size: 20px;
	font-weight: normal;
	text-align: center;
	padding: 9px 0 14px;
}

#v3 h1 {color: #00AA00;}
.text {
	border: 1px solid #B0BCC2;
	border-width: 0 1px;
	padding: 5px 10px;
}

.b1, .b2, .b3, .b4, .b5,
.b1 i, .b2 i, .b3 i, .b4 i, .b5 i,
.b1 b, .b2 b, .b3 b, .b4 b, .b5 b,
.b1 q, .b2 q, .b3 q, .b4 q, .b5 q {
	height: 1px;
	font-size: 1px;
	overflow: hidden;
	border-style: solid;
	border-width: 0 1px;
	display: block;
}
.b1 {
  margin: 0 2px;
	background: #EBEEF0;
	border: none;
}
.b1 b {
 margin: 0 1px;
 background: #B8C3C8;
 border-color: #CBD3D7;
}
.b2 {margin: 0 1px;	border-color: #D6DCDF;}
.b2 b {border-color: #B8C3C8;}
.b2 i {border-color: #E4E8EA;}
.b2 q {border-color: #F7F8F9;}
.b3 {border-color: #EBEEEF;}
.b3 b {border-color: #BCC6CB;}
.b3 i {border-color: #F9FAFB;}
.b4 {border-color: #CAD2D6;}
.b4 b {border-color: #E5E9EB;}
.b5 {border-color: #B5C0C6;}
.b5 b {border-color: #FAFBFB;}

</style>

<div id="v3">
<div class="b1"><b></b></div><div class="b2"><b><i><q></q></i></b></div>
<div class="b3"><b><i></i></b></div><div class="b4"><b></b></div><div class="b5"><b></b></div>
  <div class="text">
<h1>3. Сглаженное закругление углов с помощью CSS</h1>
Этот способ визуально абсолютно идентичен первому варианту. Но, в отличие от него, не использует ни одного графического изображения. В этом варианте каждый пиксель угла прорисовывается с помощью CSS. В результате угол выглядит сглаженным.
  </div>
<div class="b5"><b></b></div><div class="b4"><b></b></div><div class="b3"><b><i></i></b></div>
<div class="b2"><b><i><q></q></i></b></div><div class="b1"><b></b></div>
</div>
Initial URL 
http://dimox.name/smooth_rounded_corners_no_images/
Initial Description 

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Rounded Corners without images and withount JS. CSS Solution

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
CSS