CSS3 HTML5实例二(图形化边界)
顾名思义,图形化边界就是允许使用图片作为对象的边界,语法如下:
border: 5px solid #cccccc;
-webkit-border-image: url(/images/border-image.png) 5 repeat;
-moz-border-image: url(/images/border-image.png) 5 repeat;
border-image: url(/images/border-image.png) 5 repeat;
这里,border: 5px 设定了边界的宽度,然后,每个边界的图片定义告诉浏览器,使用图片的多大一部分来充当边界。边界图片还可以针对每一条边单独设置:
border-bottom-rightright-image
border-bottom-image
border-bottom-left-image
border-left-image
border-top-left-image
border-top-image
border-top-rightright-image
border-right-image
支持的浏览器: Firefox 3.1, Safari , Chrome.
【CSS3 HTML5实例二(图形化边界)】相关文章
2. Google Web Designer:图形化的HTML5编程工具
5. CSS3 HTML5实例四(使用 RGBA 实现透明效果)
6. CSS3 HTML5实例五(使用 @Font-Face 实现定制字体)
7. CSS3盒阴影实例
10. 纯 CSS 绘制各种图形
本文来源:https://www.51html5.com/a777.html
上一篇:CSS3系列教程:嵌入字体/网络字体
下一篇:CSS3 HTML5实例一(圆角)
﹝CSS3 HTML5实例二(图形化边界)﹞相关内容
- 纯 CSS 绘制图形(各种形状的砖石)
- 实例帮助你了解HTML5滑动区域选择元素Slider element
- HTML5组件Canvas实现图像灰度化(步骤+实例效果)
- HTML5 Canvas中绘制矩形实例教程
- 9个精美的 HTML5 博客网站实例
- HTML5实现的Loading缓冲效果
- 15个令人震惊的HTML5实验
- turn.js:超酷的杂志翻页效果HTML5实现
- 15个令人震惊的HTML5实验
- 用HTML5实现手机摇一摇的功能