你這樣的最好還是切圖做
用css3也達不到一毛一樣的效果，
如果你很想要嘗試一下的話可以試試，不過邊緣不是順滑的感覺
.jagged {
height: 200px;
border: 2px solid #ccc;
border-bottom: none;
position: relative;
.jagged:after {
content: '';
display: block;
height: 10px;
background-size: 20px 20px;
background-repeat: repeat-x;
background-image: linear-gradient(135deg, transparent 45%, #ccc 55%, transparent 60%), linear-gradient(45deg, transparent 45%, #ccc 55%, transparent 60%);
position: absolute;
bottom: -9px;
left: 0;
right: 0;
順便一提，比較完美的鋸齒邊可以這樣寫，雖然不適合你的情況
.jagged {
height: 200px;
position: relative;
.jagged:after {
content: " ";
display: block;
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 36px;
background: -webkit-linear-gradient(#ccc 0%, transparent 0%),
-webkit-linear-gradient(135deg, #fff 33.33%, transparent 33.33%) 0 0%,
transparent -webkit-linear-gradient(45deg, #fff 33.33%, #ccc 33.33%) 0 0%;
background-repeat: repeat-x;
background-size: 0px 100%, 9px 27px, 9px 27px;
css3製作優惠券
demo stamp stamp stamp before stamp after stamp i stamp par stamp par p stamp par span stamp par sign stamp par sub stamp copy stamp copy p stamp01 st...
css3新動 CSS3 動畫
注意 1 animation play state 也是 animation 的簡寫屬性，但在 webkit 中不適用 animation myfirst 5s infinite linear paused 即 animation name myfirst animation duration 5s...
CSS3 總結（二十） 彈性盒子（CSS3）
2.在彈性容器中可以設定min width max width屬性來限制彈性子元素的最小及最大縮放寬度。用在彈性容器 3.flex direction 屬性 用在彈性容器 指定了彈性子元素在父容器中的位置。值說明 row橫向從左到右排列 左對齊 預設的排列方式。row reverse 反轉橫向排列 ...