首页 > Web开发 > 详细

css3边框、阴影

时间：2015-06-09 13:43:24 阅读：225 评论：0 收藏：0 [点我收藏+]

标签：

一、图像边框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

css3边框、阴影

标签：

原文地址：http://www.cnblogs.com/pan-hello/p/4563070.html

踩

(0)

赞

(0)

举报

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

更多

友情链接

兰亭集智国之画百度统计站长统计阿里云 chrome插件新版天听网

关于我们 - 联系我们 - 留言反馈

© 2014 mamicode.com 版权所有联系我们:gaon5@hotmail.com

迷上了代码！