CSS圆角边框制作指南与实例

2020-05-05 07:29:36易采站长站整理

 position:absolute;   
 height:2px;   
 rightright:-1px;   
 top:-1px;   
 width:2px;   
}   
.yshp_rnd .rnd_top .east .dot {   
 position:relative;   
 height:1px;   
 left:0pt;   
 top:1px;   
 width:1px;   
}   
  
/* 下边角 */  
.yshp_rnd .rnd_bot * {   
 display:block;   
 background:#FFFFFF;   
 overflow:hidden;   
}   
.yshp_rnd .rnd_bot * * {   
 background:#DE650A;   
}   
.yshp_rnd .rnd_bot .west {   
 position:absolute;   
 bottombottom:-1px !important;   
 bottombottom:-2px;   
 height:2px;   
 left:-1px;   
 width:2px;   
}   
.yshp_rnd .rnd_bot .west .dot {   
 position:relative;   
 height:1px;   
 left:1px;   
 top:0pt;   
 width:1px;   
}   
.yshp_rnd .rnd_bot .east {   
 position:absolute;   
 bottombottom:-1px !important;   
 bottombottom:-2px;   
 height:2px;   
 rightright:-1px;   
 width:2px;   
}   
.yshp_rnd .rnd_bot .east .dot {   
 position:relative;   
 height:1px;   
 left:0pt;   
 top:0pt;   
 width:1px;   
}   
–>   
 </style>   
</head>   
  
<body>   
 <div id="sg-feedback" class="yshp_rnd">   
  
  <div class="rnd_top">   
   <div class="west">   
    <div class="dot"></div>   
   </div>   
   <div class="east">   
    <div class="dot"></div>   
   </div>   
  </div>   
  
  <div class="inner">Hello, World!</div>   
  
  <div class="rnd_bot">