首页
 导航
语文
作文
 手机
客服中心
投稿赚钱
免费注册
首页
当前位置：查字典教程网 >网页设计 > Div+Css教程 >css3 border-image使用说明
css3 border-image使用说明
摘要：在看这个属性时，好像国内的文章都没给大家说太明白，今天就一起说说首先来一个素材图片whiteButton.png然后我们要做成这样的效果：代...

在看这个属性时，好像国内的文章都没给大家说太明白，今天就一起说说

首先来一个素材图片whiteButton.png

 

css3 border-image使用说明1

然后我们要做成这样的效果：

 

css3 border-image使用说明2

代码（呵呵！请不要急，继续向下看）：

 

-moz-border-image: url(images/whiteButton.png) 0 12 0 12 round stretch; 
border-image: url(images/whiteButton.png) 0 12 0 12 stretch stretch; 
display: block; 
width:600px; 
border-width:0 12px; 
padding:10px; 
text-align: center; 
font-size: 16px; 
text-decoration: inherit; 

 

 

<div style="-webkit-border-image: url(images/whiteButton.png) 0 12 0 12 stretch stretch; 

【css3 border-image使用说明】相关文章：

★ 使用CSS3实现圆角,阴影,透明

★ css sprite原理优缺点及使用示例介绍

★ css网页制作实用技巧9则

★ CSS中background-position使用技巧

★ css的margin缩写方式

★ css的三种定位方式使用探讨

★ css cursor 的可选值

★ 巧用CSS来控制div自适应浏览器的高度

★ CSS定位属性Position详解

★ 一段巧妙的css debug代码

上一篇： 纯CSS实现的鼠标经过文本时提示的信息
相关阅读
更多>>
网友关注
更多>>
网友最新关注视频
更多>>
精品推荐
分类导航
网页设计子分类
最新 Div+Css教程学习
热门 Div+Css教程学习