CSS3帶來了很多令人激動的新特性，其中之一就是公告樣式的實現。在CSS3之前，我們可能會使用圖片或者JavaScript來創建一些好看的公告樣式，但是這些方法往往不太靈活且效果不盡如人意。而CSS3的公告樣式則使得我們可以非常靈活地實現各種各樣的效果。

/* 基本樣式 */
.notice {
background: #f5d5c9;
border: 1px solid #d56d55;
color: #d56d55;
padding: 10px;
margin-bottom: 20px;
}
/* 圓角樣式 */
.notice.rounded {
border-radius: 5px;
}
/* 漸變樣式 */
.notice.gradient {
background: linear-gradient(to bottom, #f5d5c9, #e79f97);
}
/* 動畫樣式 */
.notice.animated {
animation: shake 0.5s;
}
@keyframes shake {
0% {transform: translateX(0);}
20% {transform: translateX(-10px);}
40% {transform: translateX(10px);}
60% {transform: translateX(-10px);}
80% {transform: translateX(10px);}
100% {transform: translateX(0);}
}

上述代碼是一個比較基礎的公告樣式，它具有了背景顏色、邊框、字體顏色以及內邊距等基本樣式。同時，我們還可以加上一些額外的樣式，比如圓角、漸變和動畫等。其中動畫樣式使用了@keyframes關鍵字，用來定義一個簡單的左右抖動動畫。

使用這些樣式非常簡單，我們只需要在HTML中使用如下代碼：

<div class="notice">
<p>這是一則公告內容</p>
</div>

其中notice是我們自定義的類名，上述CSS代碼中都是以此為基礎的。

因為CSS3的兼容性問題，我們可能需要在一些瀏覽器中加上前綴才能生效，比如-webkit-border-radius、-moz-border-radius和-webkit-linear-gradient等。不過這些樣式已經被現代瀏覽器支持，算是比較常用的特性之一了。