1. 边框属性
border=radius :上右下左; 取值和margin很像
border-radius :60px 30px 40px 50px /40px 50px 60px 70px
如果border-radius有斜杠,左边的就代表水平方向(X轴),右边的代表垂直方向(Y轴)
同样的顺序需还是上右下左
border-radius:50%(超过50%) 会变成圆形
2. 文本属性
white-space:文档中的空白处
属性值:noraml: 默认忽略多个空格,只输出一个空格 .
nowrap: 强制不换行
pre:空格/缩进/换行 会给保留
pre-line:合并空表(多个空格只会输出一个空格)
pre-warp:保留空白/缩进,正常换行 ;
3. 文本超出换行
Word-warp:允许长单词转换到下一行
Word-break:允许在单词内转行(自动换行) ..
4. 文字摆放形式
direction: 文字摆放方向
属性值 rtl:文字往右向左摆放;
trl:(默认)文字往左向右摆放;
unicode-bidi: 文字内容倒向摆放
属性值: bidi-override:文字从右到左;
5. 文本单行超出显示省略号
多余的文字先让他隐藏 :overflow-hidden;
让文本显示在一行 :white-space:nowrap;
文本显示省略号: text-overflow:ellipsis;
//必须要这三个样式才可以有效果
//一般使用后台设置省略..
6.盒子阴影
box-shadow:文字阴影;
//可以有五个值 (水平偏移(X),垂直偏移(Y),扩散程度,尺寸, 颜色 ) //尺寸一般可以省略
举例: box-shadow: 0 0 10px red; //可以是rgba,#000;
可以有多个值
举例: box-shadow: 0 0 10px red, 0 0 10px blue;
可以有内阴影 :
举例: box-shadow: inset 0 0 10px red;
7.文字阴影:
text-shadow:
//可以有四个值 (水平偏移(X),垂直偏移(Y),模糊度,颜色 )
举例: text-shadow: 0 0 10px red; //可以是rgba,#000;
可以有多个值
举例: text-shadow: 0 0 10px red,0 0 10px blue;
8.文本描边,文字填充: //兼容性差,很少用
text-stroke:
//两个值 (大小,颜色) 有兼容性 所以需要加兼容前缀
举例 -webkit-text-stroke:2px,red; //谷歌
-mos-text-stroke:2px,red //火狐
text-fill-width: 描边宽度 //理解就行
text-fill-color: 描边颜色 //理解就行
9.转换大小写:
text-transform:
属性值: none(默认) 无转换;
capitalize:每个单词第一个字母为大写;
upercase :转换成大写;
lowercase:转换成小写;
border=radius :上右下左; 取值和margin很像
border-radius :60px 30px 40px 50px /40px 50px 60px 70px
如果border-radius有斜杠,左边的就代表水平方向(X轴),右边的代表垂直方向(Y轴)
同样的顺序需还是上右下左
border-radius:50%(超过50%) 会变成圆形
2. 文本属性
white-space:文档中的空白处
属性值:noraml: 默认忽略多个空格,只输出一个空格 .
nowrap: 强制不换行
pre:空格/缩进/换行 会给保留
pre-line:合并空表(多个空格只会输出一个空格)
pre-warp:保留空白/缩进,正常换行 ;
3. 文本超出换行
Word-warp:允许长单词转换到下一行
Word-break:允许在单词内转行(自动换行) ..
4. 文字摆放形式
direction: 文字摆放方向
属性值 rtl:文字往右向左摆放;
trl:(默认)文字往左向右摆放;
unicode-bidi: 文字内容倒向摆放
属性值: bidi-override:文字从右到左;
5. 文本单行超出显示省略号
多余的文字先让他隐藏 :overflow-hidden;
让文本显示在一行 :white-space:nowrap;
文本显示省略号: text-overflow:ellipsis;
//必须要这三个样式才可以有效果
//一般使用后台设置省略..
6.盒子阴影
box-shadow:文字阴影;
//可以有五个值 (水平偏移(X),垂直偏移(Y),扩散程度,尺寸, 颜色 ) //尺寸一般可以省略
举例: box-shadow: 0 0 10px red; //可以是rgba,#000;
可以有多个值
举例: box-shadow: 0 0 10px red, 0 0 10px blue;
可以有内阴影 :
举例: box-shadow: inset 0 0 10px red;
7.文字阴影:
text-shadow:
//可以有四个值 (水平偏移(X),垂直偏移(Y),模糊度,颜色 )
举例: text-shadow: 0 0 10px red; //可以是rgba,#000;
可以有多个值
举例: text-shadow: 0 0 10px red,0 0 10px blue;
8.文本描边,文字填充: //兼容性差,很少用
text-stroke:
//两个值 (大小,颜色) 有兼容性 所以需要加兼容前缀
举例 -webkit-text-stroke:2px,red; //谷歌
-mos-text-stroke:2px,red //火狐
text-fill-width: 描边宽度 //理解就行
text-fill-color: 描边颜色 //理解就行
9.转换大小写:
text-transform:
属性值: none(默认) 无转换;
capitalize:每个单词第一个字母为大写;
upercase :转换成大写;
lowercase:转换成小写;