css3 border

日期：2021-03-13 类型：科技新闻 

关键词：通道抠图，怎么在图片上编辑文字，创客贴作图神器，免费图片设计制作在线，背景透明图制作

在看这个特性时，仿佛中国的文章内容都没给大伙儿说太搞清楚，今日就1起说说 强烈推荐大伙儿看下 这篇文章内容 https://www.jb51.net/css/38358.html

最先来1个素材照片whiteButton.png

 

随后大家要做成这样的实际效果：

 

编码（呵呵！请不必急，再次向下看）：

拷贝编码
编码以下:

<div style="-webkit-border-image: url(images/whiteButton.png) 0 12 0 12 stretch stretch;
-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;
color:white;+color:black;">在safari3+和FF3.5,chrome5.0+,opera10.53访问器里能看到边框情况图</div>

下面大家来说1下基础专业知识：

1。界定： border-image ： none | <image> [ <number> | <percentage>]{1,4} [ / <border-width>{1,4} ]? [ stretch | repeat | round ]{0,2}

 

none：
默认设置值。无情况图。
<image>：
应用肯定或相对性 url 详细地址特定情况图象。

 

 <number>：

边框宽度用固定不动像素值表明。
<percentage>：
边框宽度用百分比表明。
[ stretch | repeat | round ]：

拉伸 | 反复 | 平铺 (在其中stretch是默认设置值。)

请看下图平分析1下css编码

 

也便是：

她们把照片，用#的方法截取，随后用 stretch | repeat | round 来操纵水平或竖直的实际效果。看看下图你就搞清楚了

  

 

 自然有关边框的宽度你还可以用%;其基本原理也是1样：

 

到这  大伙儿应当弄搞清楚border-image是如何1回事了吧。

给大伙儿 1些事例 训练

圆角

borderImage 
border-width: 10px;
border-image: url("media/roundedCorner.png") 20;


ninja! 
border-width: 20px;
border-image: url("media/border.png") 20;

Drop shadow

wooooosh 
border-width: 10px;
border-image: url("media/blackShadow.png") 5;

Tab

katanas 
border-width: 15px 20px 0;
border-image: url("media/tab.png") 20 20 0;


learn
to be
lazy
border-width: 10px 10px 0;
border-image: url("media/gradient.png") 10 10 0;

好几个按钮

hover & click 
But not impossible.
   
This one is tricky.

 参照文本文档：www.lrbabe.com/sdoms/borderImage/

ejohn.org/blog/border-image-in-firefox/ 

上一篇：table CSS制做漂亮的网页页面报表 返回下一篇：没有了