CSS3案例前端开发入门笔记.docxVIP

CSS3案例 border-radius:25px;时!DOCTYPE html border-radius:25px;时 !DOCTYPE html html head 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 /head body divborder-radius 属性允许您向元素添加圆角。/div /body /html border-radius:10px时： !DOCTYPE htmlhtml !DOCTYPE html html head style div { width:300px; height:100px; background-color:#ff9900; -moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */ box-shadow: 10px 10px 5px #888888; } /style /head body body div/div /body /html Border-shadow: a b c color; a值：值越大，阴影向右偏离越多，右边阴影面积越大 b值：值越大，阴影向下偏移越多，下面阴影面积越大。 c值：值越小，阴影的轮廓越清晰；值越大，阴影的轮廓越模糊。 Color值：阴影的颜色。 上例中： box-shadow: 10px 10px 5px #888888; 时显示结果为： box-shadow: 30px 50px 20px red;时 显示结果为： !DOCTYPE htmlhtml !DOCTYPE html html head 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 /head body div id=round在这里，图片铺满整个边框。/div br div id=stretch在这里，图片被拉伸以填充该区域。/div p这是我们使用的图片：/p img src=/i/border.png pb注释：/b Internet Explorer 不支持 border-image 属性。/p pborder-image 属性规定了用作边框的图片。/p /body /html stretch stretch 英[stret?] HYPERLINK /javascript:; HYPERLINK /javascript:; 美[str?t?] HYPERLINK /javascript:; HYPERLINK /javascript:; v. 伸展; 延伸; 持续; 包括; border-image:url(/i/border.png) 30 30 round; 图片重复 border-image:url(/i/border.png) 30 30 stretch; 图片拉伸 前面的数值代表上下 边框重复或者拉伸的次数 后面的数值代表左右边框重复或者拉伸的次数。 当border-image:url(/i/bord