CSS高级技巧之圆角矩形下

2020-03-24 17:49:58

字体：大中小

来源：转载

供稿：网友

Top-Left.gif 与 Bottom-Left.gif 都是大图像, Top-Right.gif 和 Bottom-Right.gif 都是小图像, 小图像在大图像上根据尺寸进行自动滑动以适应内容. 该方法用到2组4个图片: 1组Top图片构成顶部圆角, 1组Bottom图片构成底部圆角以及主体. 注意容器的最大高度和宽度不能超过图片的最大高度和宽度. 图片的结构位置: html代码大致如下: ＜div ＞＜div ＞＜div ＞＜h1＞标题＜/h1＞＜p＞内容＜/p＞＜/div＞＜/div＞＜/div＞ CSS代码大致如下: .wrapper{width:20em;background:#ccc url(../images/bottom-left.gif) no-repeat left bottom;} .box-outer{background:url(../images/bottom-right.gif) no-repeat right bottom;} .box-inner{background:url(../images/top-left.gif) no-repeat left top;} .wrapper h1{padding:2%;background:url(../images/top-right.gif) no-repeat right top;} .wrapper p{padding:2%;} Tips: 该方法很好的解决了容器扩展的问题, 但是要注意容器的最大尺寸不要超过背景图片所能构成的最大尺寸; 该方法需要2组额外的没有任何语义的标签, 在结构上并不理想, 我们可以用JavaScript和DOM动态添加额外元素来避免这个问题, JavaScript不作讨论滑动门适用范围很广, 以至于随处可见. 4. 山顶角(MountainTop) Web大师Dan Cederholm的发明, 和他在Web Standard Solutions中的变色龙小图标有异曲同工之妙. 如果用 3.滑动门的技术创建多种颜色的圆角矩形, 那是不是要建立多组不同颜色的图片呢? 那是不是会很麻烦呀? 幸运的是Dan为我们带来了山顶角. 他建立的不是多种颜色的图片组, 而是一组圆角的蒙板. 用蒙板盖住背景色, 生成圆角矩形, 这种逆向思维令人敬佩. 圆角蒙板基本的HTML代码和CSS代码与上例相同, 也需要4个不同的圆角蒙板. 代码不做重复. Tips: 可以使用.png来创建圆滑的透明蒙板, 但介于IE6和以下版本不支持png-24的透明效果, 需要用到Hacks, 所以不太推荐. 所以对于gif图片的蒙板, 对于小弧度的圆角矩形效果较好, 大弧度的圆角矩形可能会出现锯齿. 同样的需要添加额外的非语义标签, 语义化狂热者们可以用JavaScript来完成这个工作. 5. CSS Sprites 圆角 CSS Sprites并不是专门制作圆角矩形的, 但是它提供了一种制作圆角矩形的方案. 结构构成图实际用到的圆角小图只单单用background的position来指定圆角图片背景定位, 但是会多出很多额外标签, 这里不做推荐本文作者:html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：如何写出轻便、更快的CSS代码

下一篇：有条件的添加CSS的hover样式