css效果积累01

用css实现一个左上角角标效果

<div class="wrap"><div class="img"></div><div class="notice">1</div></div><div class="wrap"><div class="img"></div><div class="notice">12</div></div><div class="wrap"><div class="img"></div><div class="notice">13</div></div><style>.wrap {    width:50px;    margin-bottom:10px;    position:relative;}.img {    width:50px;    height:50px;    border:1px solid #000;}.notice {    width:20px;    height:20px;    line-height:20px;    font-size:10px;    color:#fff;    text-align:center;    background-color:#f00;    border-radius:50%;    position:absolute;    right:-10px;    top:-10px;}</style>

实际效果如下：

其中top和right用来控制角标的位置。