css3之border-image

border-image_CSS

用图片来做边框
border-image:url(skin/border.png) 27/27px stretch;

用图片来做边框
border-image:url(skin/border.png) 27/27px round;

用图片来做边框
border-image:url(skin/border.png) 27/27px repeat;

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>border-image_CSS</title><meta name="author" content="" /><meta name="copyright" content="" /><style>.test{    padding:10px;    -moz-border-image:url(img/border.png) 27/27px stretch;    -webkit-border-image:url(img/border.png) 27/27px stretch;    border-image:url(img/border.png) 27/27px stretch;    margin-bottom:20px}.test1{    padding:10px;    -moz-border-image:url(img/border.png) 27/27px round;    -webkit-border-image:url(img/border.png) 27/27px round;    border-image:url(img/border.png) 27/27px round;    margin-bottom:20px}.test1{    padding:10px;    -moz-border-image:url(img/border.png) 27/27px repeat;    -webkit-border-image:url(img/border.png) 27/27px repeat;    border-image:url(img/border.png) 27/27px repeat;    margin-bottom:20px}</style></head><body>border-image：<border-image-source> || <border-image-slice> [ / <border-image-width>? [ / <border-image-outset> ]? ]? || <border-image-repeat>

<div class="test">用图片来做边框<br />border-image:url(skin/border.png) 27/27px stretch;</div><div class="test1">用图片来做边框<br />border-image:url(skin/border.png) 27/27px round;</div><div class="test1">用图片来做边框<br />border-image:url(skin/border.png) 27/27px repeat;</div></body></html>

哈，开始不明白，现在懂了，FF和谷歌表现不同呢。你也来试试吧。

转载于:https://www.cnblogs.com/jennyQ/archive/2012/02/07/2341604.html

css3之border-image相关推荐

CSS3之border属性
border相关属性需要大量练习,方可运用自如! 文字下方有Demo!!! border: 作用: 设置在一个声明中包含所有的边框属性说明: 可以设置 ...
CSS3之border
本来是想把border和background写一块的,结果写着写着发现background内容太多,先发border吧目录 1.border-radius (1)不做拆分 (2)拆分 (3)大合并 ...
css3实现border渐变色
话不多说 ,直接上代码: .box{width: 100px; height: 100px; border:10px solid #ddd; border-image: -webkit-linear- ...
html 直线变曲线,CSS3怎么画曲线？
CSS3怎么画曲线?下面本篇文章给大家介绍一下CSS3画曲线的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. CSS3怎么画曲线? 大家都知道,CSS3中border已经可以实 ...
css3中边框的4种样式
border是CSS的一个属性,用它可以给能确定范围的HTML标签画边框,它可以定义边框线的类型.宽度和颜色,最终可以制作一些特殊效果 css3的边框有4种样式: 1.border-color(边框的 ...
HTML5+CSS3选择器
一.HTML5的认识 HTML5相较于HTML4进行了升级,比HTML4语义化更明确,新增了一些标签,同时也废除了一些元素旧的标签. 1.HTML5新增的语义化结构元素 header表示一个页面中一个 ...
百度前端笔试题 css3画三角形
昨天做了百度2015年前端研发笔试卷,总体感受是比较看重html和css功底,对JavaScript的考察反而更少一些,貌似阿里也是比较看重css这一块.其中有一道用css实现的布局问题,是在一个大矩 ...
读飘零雾雨版css3.0版本笔记
一.Css中的属性继承分析: 1.不具备继承特点的有 :定位.布局.弹性盒模型 .尺寸 .外补白内补白.边框.背景.多栏.2D变换.过度.动画.打印.媒体查询模块儿 2.具有继承特性的有: 颜色 c ...
画一只动态皮卡丘（一）
前言今天开始做一个画皮卡丘的项目,所以总结一下过程中学到的一些新知识. 一设置盒模型设置盒模型为 IE盒模型: *{margin: 0;padding: 0;box-sizing: borde ...
css字体 text,css文本样式text、字体样式font
文本样式text 1.文本颜色color 例如h1 {color:red;} 2.文本方向direction,不常用默认ltr从左到右,rtl表示从右到左 3.文本水平对齐方式text-align ...

css3之border-image

css3之border-image相关推荐

最新文章

热门文章