border支持图片格式boxshadow不支持

来源：蜘蛛抓取(WebSpider) 时间：2022-09-11 10:50 标签： border—box

本节介绍了 ECharts y 坐标轴刻度标签的相关属性设置，当我们在设置坐标轴刻度标签的时候，首先要考虑的是要怎么才能将刻度标签给显示出来，然后再考虑一些其它的属性设置

这其中包含了：刻度标签的显示间隔、刻度标签是朝内还是朝外、怎么控制轴线与标签之间的距离、刻度标签的文本样式该是怎样的等等。详细的设置介绍如下：

Object 对 y 坐标轴的刻度标签进行相关设置。

是否显示 y 坐标轴的刻度标签。

y 坐标轴刻度标签的显示间隔，在类目轴中有效。

默认会采用标签不重叠的策略间隔显示标签。

  • 可以设置成 0 强制显示所有标签。
  • 如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。

可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：

第一个参数是类目的 index，第二个值是类目的名称，如果跳过则返回 false。

设置 y 轴的刻度标签是否朝内，默认情况下是朝外的。

y 轴刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。

旋转的角度的取值可以从 -90 度到 90 度。

控制刻度标签与轴线之间的距离。

得到 y 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 

// 使用字符串模板，模板变量为刻度默认标签 {value}
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
 // 格式化成月/日，只在第一个刻度显示年份

参数是标签的文本，返回颜色值，如下示例：

设置 yAxis 刻度标签的文字字体的风格

设置 y 轴刻度标签文字字体的粗细

设置 y 轴刻度标签文字的字体系列

string 设置 y 轴刻度标签文字的水平对齐方式，默认自动。

rich 中如果没有设置 align，则会取父层级的 align。例如：

string 设置 y 轴刻度标签文字的垂直对齐方式，默认自动。

number 设置 y 轴刻度标签的行高。

设置 y 轴刻度标签文字块的背景色。

// 这里可以是图片的 URL，

当使用图片的时候，可以使用 width 或 height 指定高宽，也可以不指定自适应。

设置 y 轴刻度标签文字块的边框颜色。

设置 y 轴刻度标签文字块的边框宽度。

设置 y 轴刻度标签文字块的圆角。

设置 y 轴刻度标签文字块的内边距。例如：

设置 y 轴刻度标签文字块的背景阴影颜色。

设置 y 轴刻度标签文字块的背景阴影长度。

设置 y 轴刻度标签文字块的背景阴影 X 偏移。

设置 y 轴刻度标签文字块的背景阴影 Y 偏移。

一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片时，可能会使用它。

width 也可以是百分比字符串，如 '100%'。表示的是所在文本块的 contentWidth（即不包含文本块的 padding）的百分之多少。

之所以以 contentWidth 做基数，因为每个文本片段只能基于 content box 布局。如果以 outerWidth 做基数，则百分比的计算在实用中不具有意义，可能会超出。

number, string 设置 y 轴刻度标签文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 backgroundColor）时，可能会使用它。

设置 y 轴刻度标签文字本身的描边颜色。

设置 y 轴刻度标签文字本身的描边宽度。

设置 y 轴刻度标签文字本身的阴影颜色。

设置 y 轴刻度标签文字本身的阴影长度。

设置 y 轴刻度标签文字本身的阴影 X 偏移。

设置 y 轴刻度标签文字本身的阴影 Y 偏移。

人一旦被一些繁杂的事消耗掉精力的话，即使有时间静下心来写篇东西也变得那么的不易啊，呵呵。题外话就不多说了，真没想到这篇早就构思好的东西写了这么久...

在上一篇的里，我从标准的角度出发，详细地写到了box-shadow的标准的方方面面。但毕竟是游戏规则似的细节，读起来恐怕还是没什么味道，按照上次的安排，这篇里不再牵扯标准的任何细节性的东西，主要就是讲实际应用中，box-shadow能做些什么。

对于设计来说，阴影的重要性和颜色等同。视觉要表达的是“光”的美的规则，任何视觉归结到底是光的艺术。当然，有光就有影。要表现空间和层次，通常的做法无非就是这3种：阴影、渐变和透视图。这三者是让网页脱离平面化而表现出层次的常用手法。

现在流行的设计里总是使用了大量的阴影，看看Vista、win7里夸张的box阴影，mac里的阴影比比皆是。box-shadow赋予了我们阴影样式，使得我们可以不再总是依赖于图片的使用。当然box-shadow最为常用的做法就是“当做阴影”来使用，但它的用法却远不止如此，甚至还能“管些其他样式的闲事”。虽然我不推荐box-shadow做太多越权的事，但在当前有些属性还不完善的情况下，box-shadow的良好支持不失为一种解决途径。

当然它本来就是阴影:) 。我们可以为网页元素中的任意的box添加视觉上的阴影表现，这正是box-shadow本来要做的。

虽然基于标题“详解”二字我很想写的更全面些，但是对于box-shadow阴影层面上的使用，我还是决定略过。这方面的使用可以参考css3.info上的 (可能有时被墙)。其它国内的关于box-shadow的阴影使用的文章也已经相当的多了，所以这里就不再多说了。 因为这是box-shadow最基本使用方法，并没有什么特殊之处。

除了把阴影用作阴影以外，我们还能拿它做什么？由于box-shadow拥有扩展半径这个值，使得阴影具备了充当边框的能力。看看下面的阴影模拟的边框：

实际上，用阴影充当边框，其效果是似边框而非边框，阴影充当边框和真正的CSS边框有着本质的不同。如果你的眼力够强悍，应该是可以看出上面两者的不同的——虽然他们的尺寸完全相同外表也毫无新差别，但是左边的box要比右边的低那么一点点，是的，一个像素。

当我们加粗边框之后，这种表现就变得异常明显：

这和我们之前讲的阴影不影响布局的结论不谋而合——虽然边框被计算了宽度，但浏览器忽略阴影。因为这个特点，阴影所模拟的边框可以更加自由的使用，当然必须注意层级关系和覆盖。并且恰恰是因为可以覆盖，所以在没有绝对和相对定位的情况下，在普通流中，都可以将边框叠加！

事实上，阴影创造出的边框远不止如此。我在前篇多次提到的“多阴影”，在实现边框上也是大有作用。

多阴影不仅仅使得阴影可以模拟多多层边框的情况，更重要的是，配合box-shadow的扩展半径，我们更是能造出单层的多色边框。或者在边框上加上什么修饰也变得异常简单。

所以借助于box-shadow，我们可以模拟出许多种曾经让人皱眉头的边框，当然这是有限定的，并且适用面其实并不大。但是当我们恰当的使用的时候，仍然有突出的效果。同样，使用box-shadow作边框有很多要注意的地方。注意使用时的层级关系（前篇有详细讲过），防止阴影出乎意料外的覆盖（毕竟其不影响布局），最后就是要考虑到阴影的大小始终是跟着box的高宽的，所以box宽高宽变化必须被考虑在内。实际上box-shadow的边框同样有相当好的自适应效果，但同时可能自适应出来的效果并不是设计者所希望的那样。

好了，关于伪造边框的使用就写到这里。其实box-shadow对于边框发挥余地还是相当大的，配合模糊、扩展半径和多阴影这几个关键要素，我相信还能够伪造出更加有趣的边框。为了引出下面的一个标题，我们看看下面这个多阴影的例子：

将一个多阴影边框模糊后的对比效果如上面的左右所示——模糊了30px。模糊意味着边界的不明显，这其实和一个概念很相近——渐变。如果你看到了边框各个边框因为模糊而融合在一起，那么这正是下面所要讲的内容。

如果你是一位设计师，一定不难理解模糊和渐变的裙带关系，这就是我们最后要利用模糊的原因。box-shadow的模糊值，我们可以利用这个值伪造渐变效果。

也许你要问为什么不使用CSS3的渐变呢？这有两个原因：其一，各个浏览器对于渐变的支持的使用方法上，差别较大。其二，伪造渐变和伪造边框一样，在特定场景下是有用的。所以用box-shadow伪造渐变是有价值的。

不幸的是，现代浏览器对于模糊的支持上仍然是有所不同的。由于W3C虽然定义了box-shadow的各个值，但是却并没有限定box-shadow的模糊所使用的算法，这就直接导致了各浏览器之间的差别。在这点上，Firefox显然要高明些，它的模糊算法非常平滑，是完全可以当做渐变来使用的。然后是Opera，表现的一样不错，至少从Opera11（因为在我的印象里Opera10的表现也很一般，改天再看下）开始它的模糊算法也比较平滑。Chrome以及Safari相对来说，表现的都非常一般，在模糊的边缘是有些生硬的，甚至都能看到棱角...囧。(更新：Chrome 15 已经解决了模糊算法的问题)

下面是一个直观的比较，用的就是刚才上面的那个效果，差异是显而易见的：

然而差异如此，把box-shadow用在表现简单渐变上也已经是足够的了。多阴影、内阴影、扩展半径以及模糊这四个点，已经使box-shadow具备了渐变的基本能力。

下面就是两个最简单的例子：

当然，限于模糊算法，模拟的渐变跨度并不能太大。左右渐变已经非常明显的变得很“不线性”，并且这种情况在chrome下会变得更加的明显。换言之，这种模拟的渐变可能比较适合用在按钮、tab标签等小件的上下渐变上。

其实我博客的自己的主题里是大量使用了box-shadow的(现在的主题已经换过了，已经移除了大部分阴影)(23 December 2013: 迁移到Ghost之后暂时用默认主题)。但大部分都是非常浅的#ccc甚至是#eee这种非常弱的灰色调。因为本来自己的主题就是各种色调的灰线和非常淡的灰色块。举个box-shadow使用上的例子，我觉得自己的导航上的tab标签会比较适合：

单单一个tab标签上，我就用了4个阴影，一个用来投射阴影，一个用来制造底色渐变，一个用做白色的勾线渐变，最后的字体的白色阴影则是制造雕刻的立体感。不过，一切都是那么的淡，所以几乎是看不出来的。但是我仍然相信，在灰度表现较好的显示器上，这点想法还是多少能够表现出来的。我不敢说它有多美观，甚至甚少有人能看出用了多少阴影，但我觉得这么淡足够了，毕竟这是细节，丰富的它的时候拘泥其中，但是一旦作为一个主体的一小部分，是可以完全忽略的。

虽然大费周章的用CSS做这些PS只需瞬间完成的事确实非常蛋疼，就像CSS3一开始人们热衷于用圆角和渐变绘制各种图标一样显得有些毫无意义。这些都是事实。但仅仅因为如此而放弃对于新特性的探索，也绝对是蛋疼的。

总结就不写了，只是没想到这篇文章写这么久(笑)。匆匆成文，写错的地方还请各位随意指出。

我要回帖

更多关于 border—box 的文章

 

随机推荐