css3边框、阴影

一、图像边框border-image

• 语法：border-image：border-image-source（图片）  ||  border-image-slice（裁剪位置）  ||  border-image-repeat（重复性）；
• 例子：border-image：url（xxx.jpg） 33.3%（可以有四个值）  round；
• 各值含义：
• border-image-source：none | url 默认值为：none；  图片来源路径
• border-image-slice：[number | percentage] {1,4} && fill；  默认值100%，边框背景图片的分割方式
• border-image-repeat：border-image-repeat：stretch（用拉伸方式填充边框背景图） | repeat（平铺填充，超过边界时会被截断） | round（平铺填充，动态调整图片）；

 

二、文本阴影text-shadow

• 语法：text-shadow：水平偏移量  垂直偏移量  阴影模糊值  颜色；
• none：无阴影
• 水平偏移量：水平便宜，可为负
• 垂直偏移量：阴影垂直，可为负
• 阴影模糊值：可选，不允许为负
• 颜色：rgba（）
• 例子：浮雕：color：white；text-shadow：5px  0  1px  black；

 

三、文字描边text-stroke

• 语法：text-stroke：边框像素  颜色；
• 一般要在前面要添加浏览器前缀以兼容，如-webkit-

 

四、文字排版direction

• direction：ltr（默认。文本方向从左到右流入）  |  rtl（文本从右到左流入）  |  inherit（规定应该从父元素继承direction属性的值）；
• 实现文本从右到左书写：direction：rtl；unicode-bidi：bidi-override；

 

五、 设置文本的方向unicode-bidi

• 语法：unicode-bidi : normal | bidi-override | embed
• normal : 　对象不打开附加的嵌入层，对于内联要素，隐式重排序跨对象边界进行工作
• embed : 　对象打开附加的嵌入层，direction属性的值指定嵌入层，在对象内部进行隐式重排序
• bidi-override : 　严格按照direction属性的值重排序。忽略隐式双向运算规则
• 注意：用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用。
  假如您想应用direction属性于内联文本，您必须设定unicode-bidi属性为embed或bidi-override。
  对应的脚本特性为unicodeBidi。

---

六、文本省略text-overflow

• 语法：text-overflow: clip（修剪文本）| ellipsis（显示省略符号来代表被修剪的文本）| string（使用给定的字符串来代表被修剪的文本）;
• 实现把超出边界的文本以省略号表示：
• white-space：nowrap；  实现段落中文本不换行
• overflow：hidden；
• text-overflow：ellipsis；

 

七、如何处理元素内的空白white-space

• normal        默认。空白会被浏览器忽略。
• pre             空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
• nowrap      文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
• pre-wrap   保留空白符序列，但是正常地进行换行。
• pre-line      合并空白符序列，但是保留换行符。
• inherit        规定应该从父元素继承 white-space 属性的值。

 

八、盒阴影box-shadow

• 语法：box-shadow：水平偏移量 | 垂直偏移量 | 阴影模糊度 | 阴影大小（阴影外延值） | 颜色；
• 如果要为内阴影，则在参数最后添加——insert