CSS3学习--------边框样式

CSS3在原有的CSS基础之上在边框加了border-radius （圆角） 、box-shadow （投影）、border-image（图片边框）

border-radius （圆角）

<style>  div { text-align:center; border:2px solid #a1a1a1; padding:10px 40px;  background:#dddddd; width:350px; border-radius:25px; -moz-border-radius:25px; /* 老的 Firefox */ } </style>

box-shadow （投影）

<style>  div { width:300px; height:100px; background-color:#00ccff; -moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */ box-shadow: 10px 10px 5px #888888; } </style>

border-image（图片边框）

<style>  div { border:15px solid transparent; width:300px; padding:10px 20px; } #round { -moz-border-image:url(/i/border.png) 30 30 round; /* Old Firefox */ -webkit-border-image:url(/i/border.png) 30 30 round;/* Safari and Chrome */ -o-border-image:url(/i/border.png) 30 30 round; /* Opera */ border-image:url(/i/border.png) 30 30 round; } #stretch { -moz-border-image:url(/i/border.png) 30 30 stretch;/* Old Firefox */ -webkit-border-image:url(/i/border.png) 30 30 stretch;/* Safari and Chrome */ -o-border-image:url(/i/border.png) 30 30 stretch; /* Opera */ border-image:url(/i/border.png) 30 30 stretch; } </style>