CSS3實現邊框鋸齒效果

標籤：class   color   c   width   line   a   

通過CSS3的linear-gradient實現的

 

 

<div class="bg"></div>

 

 

.bg{

    width:300px;

    height:50px;

    background:#caca8c;

    background-image:-webkit-gradient(linear,50% 0,0 100%,

                                        from(transparent),

                                        color-stop(.5,transparent),

                                        color-stop(.5,#d86707),

                                        to(#d86707)    

                    ),

                    -webkit-gradient(linear,50% 0,100% 100%,

                                        from(transparent),

                                        color-stop(.5,transparent),

                                        color-stop(.5,#d86707),

                                        to(#d86707)                                            

                    );

    background-image:-moz-linear-gradient(50% 0 -45deg,

                                transparent,

                                transparent 50%,

                                #d86707 50%,

                                #d86707                                            

                    ),-moz-linear-gradient(50% 0 -135deg,

                                transparent,

                                transparent 50%,

                                #d86707 50%,

                                #d86707                                            

                    );                                

    background-size:30px 15px;

    background-repeat:repeat-x;

    background-position:0 100%;                    

}