css3 border

2021-01-20 14:12 jianzhan

在看这个特性时,仿佛中国的文章内容都没给大伙儿说太搞清楚,今日就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/