CSS角標是指在元素的某個地方添加一個小標簽，通常用于展示計數器、狀態或標識。例如，在購物車中，我們可以使用角標來顯示購物車中的商品數量。CSS角標最常見的實現方式是使用偽元素，如下所示：

/* 清除默認樣式 */
button {
border: none;
background: transparent;
position: relative;
}
/* 添加角標 */
button::after {
content: '1';
position: absolute;
top: -10px;
right: -10px;
background: red;
color: #fff;
font-size: 12px;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 50%;
}

上述代碼中，我們首先清除了按鈕的默認樣式，然后通過添加偽元素::after來實現角標。content屬性用于設置偽元素的內容，而position屬性設置為absolute可以讓偽元素相對于其定位上下文進行定位。接下來，我們通過設置top和right值將角標定位在按鈕的右上方，設置背景、顏色、字號等樣式使角標看起來更加醒目。

如果想要實現超出外框的效果，我們可以通過使用CSS的overflow屬性來實現。overflow屬性用于設置元素內容超出其框的處理方式。

/* 設置容器寬度和高度，以及樣式 */
.container {
width: 200px;
height: 200px;
border: 1px solid #000;
overflow: hidden;  /* 隱藏超出的內容 */
}
/* 設置圖片大小和邊距 */
img {
width: 250px;
margin-top: -30px;
margin-left: -30px;
}

在上述代碼中，我們創建了一個高度和寬度為200px的容器，并設置其overflow屬性為hidden，這意味著超出容器部分的內容將被隱藏。接下來，我們通過設置圖片的寬度和負邊距實現了圖片超出容器的效果。