mojoportal学习——文章翻译之 制作圆角

翻译的不好 大家见谅

 

 一种方法是使用图片，如下模板中
 
 graformix-orange
 graformix-company
 freecsstemplates-level2
 mmcgee-uncreativesuite
 styleshout-refresh, styleshout-coolwater, styleshout-envision uses images only for rounding the outer container

一种方法是实用html+css

如下模板中：
 dcarter-businessone
 dcarter-sq2
 dcarter-ticktockpro
 mitchinson-earthy
 mitchinson-earthy-alt1
 ramblingsoul-5contentpanes
 ramblingsoul-colorpencils
 snop-plasticboy-reflection
 viktorpersson-thehobbit
 
 在aspx或ascx文件中顶端添加：
 <mp:CornerRounderTop id="ctop1" runat="server" EnableViewState="false" />
 
 低端添加：
 <mp:CornerRounderBottom id="cbottom1" runat="server" EnableViewState="false" />
 
 他们将会产生如下代码：
 （上面的：）
 
 <div class='rtop'><div class='r1'></div><div class='r2'></div><div class='r3'></div><div class='r4'></div></div>

   （下面的：）

<div class='rbottom'><div class='r4'></div><div class='r3'></div><div class='r2'></div><div class='r1'></div></div>

相关的CSS代码：

.rtop, .rbottom{display: block;}
.rtop, .rbottom{background: #E4DCB2;}
.rtop .r1, .rtop .r2, .rtop .r3, .rtop .r4,
.rbottom .r1, .rbottom .r2, .rbottom .r3, .rbottom .r4{background: #9C9473;}
.rtop .r1, .rtop .r2, .rtop .r3, .rtop .r4,
.rbottom .r1, .rbottom .r2, .rbottom .r3, .rbottom .r4
{ display: block;height: 1px;overflow: hidden; }
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.rtop .r4, .rbottom .r4{ margin: 0 1px; height: 2px }
.rbottom { margin-bottom:10px; }