css3制作郵票(鋸齒邊框)

html:

css:

body,h1,h2,h3,h4,ul,li,div,a,p{

margin:?0;

padding:?0;

font-family:?arial;

}

body{

/*background-color:?#2F3238;*/

background-color:?skyblue;

}

.stamp{

width:?280px;

height:?180px;

display:?inline-block;

padding:?10px;

background-image:?radial-gradient(transparent?0px,?transparent?4px,?white?4px,white);

/*下面兩步出現?郵票的?鋸齒效果*/

background-size:?20px?20px;

background-position:?-10px?-10px;

position:?absolute;

top:?100px;

left:?100px;

}

.stamp:after{

content:?"";

box-shadow:?0?0?20px?1px?rgba(0,0,0,0.5);

position:?absolute;

top:?5px;

left:?5px;

right:?5px;

bottom:?5px;

z-index:?-1;

}

注意：

先編寫

樣式編寫的過程中，點陣圖實現如下所示：

background-image: radial-gradient(transparent 0px, transparent 4px, white 4px,white);

background-size: 20px 20px;

鋸齒邊框實現：

background-position: -10px -10px;

然后在div中添加圖片標簽：

效果圖下所示：

然后再給div添加 盒子陰影效果：

box-shadow: 0 0 20px 1px rgba(0,0,0,0.5);

下面定位是對陰影位置的定位：

position: absolute;

top: 5px;

left: 5px;

right: 5px;

bottom: 5px;

z-index: -1;

效果如下所示：

總結

以上是生活随笔為你收集整理的html锯齿边框,css3制作邮票（锯齿边框）-css3制作邮票（锯齿边框）-HTML5+CSS3-编玩编学- 注重积累的过程 快速锁定问题解决问题 写博客，在积累源码,持续更新技术博客,加分项...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。