xg网页设计41学习课件.pptVIP

圆角框的实现： .box { width: 418px; background: #effce7 url(pic/bottom.gif) no-repeat left bottom; padding-bottom: 1px;} .box h2 { background: url(pic/top.gif) no-repeat left top; margin-top: 0; padding: 20px 20px 0 20px;} .box p { padding: 0 20px;} 圆角框2 h1Fixed Rounded Corner Box Example/h1 div class=box h2Lorem Ipsum/h2 p class=lastLorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin venenatis turpis ut quam. In dolor. Nam ultrices nisl sollicitudin sapien. Ut lacinia aliquet ante./p p/p/div 素材- top2.gif ---no-repeat left top title2.gif ----repeat-y bottom2.gif ----no-repeat left bottom 实现方法 .box { width: 424px; background: url(img/tile2.gif) repeat-y; } .box h2 { background: url(img/top2.gif) no-repeat left top; padding-top: 20px;} .box .last { background: url(img/bottom2.gif) no-repeat left bottom; padding-bottom: 20px; } 灵活的圆角框 h1Flexible Rounded Corner Box Example/h1 div class=box div class=box-outer div class=box-inner h2Lorem Ipsum/h2 pLorem ipsum dolor sit amet, consectetuer …… p/p/div/div/div 素材 .box { width: 20em; background: url(img/bottom-left.gif) no-repeat left bottom;} .box-outer { background: url(img/bottom-right.gif) no-repeat right bottom; padding-bottom: 1px;} .box-inner { background: url(img/top-left.gif) no-repeat left top;} .box h2 { background: url(img/top-right.gif) no-repeat right top; padding-top: 1em;} .box h2, .box p { padding-left: 1em; padding-right: 1em; } BORDER-RADIUS CSS3所支持的属性, 没有得到广泛支持。 Firefox支持这个属性，但要加上-moz-前缀 .box { border: 1px solid black; -moz-border-radius:1em; width:500px; margin:0 auto; } 可以修改某个角的弧度 -moz-border-radius-topright:1em Safari浏览器需要的前缀是：-webkit -webkit-border-radius-topright:1em http://www.html.it/articoli/niftycube/index.html 投影 第4章 背景图像效果 背景图像基础 圆角框 背景图像基础 background-color (transparent) background-image background-repeat background-position background-at