-
CSS3文字与字体 text-overflow 与 word-wrap text-overflow用来设置是否使用一个省略标记(...)标示对象内文本的溢出。 语法: text-overflow:clip(表示剪切) | ellipsis(表示显示省略标记) 但是text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果,代码如下: text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 同时,word-wrap也可以用来设置文本行为,当前行超过指定容器的边界时是否断开转行。 语法: word-wrap:normal(表示控制连续文本换行) | break-word(表示内容将在边界内换行) normal为浏览器默认值,break-word设置在长单词或 URL地址内部进行换行,此属性不常用,用浏览器默认值即可。查看全部
-
CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同,这里我们只针对线性渐变的 W3C 标准语法来分析其用法,其余大家可以查阅相关资料。W3C 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。 这一小节我们来说一下线性渐变: linear-gradient(to bottom,#fff,#999) 参数: 第一个参数:指定渐变方向,可以用“角度”的关键词或“英文”来表示: 第一个参数省略时,默认为“180deg”,等同于“to bottom”。 第二个和第三个参数,表示颜色的起始点和结束点,可以有多个颜色值。 background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);查看全部
-
RGB是一种色彩标准,是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。 语法: color:rgba(R,G,B,A) 以上R、G、B三个参数,正整数值的取值范围为:0 - 255。百分数值的取值范围为:0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数,取值在0~1之间,不可为负值。 代码示例: background-color:rgba(100,120,60,0.5);查看全部
-
CSS3边框 为边框应用图片 border-image 顾名思义就是为边框应用背景图片,它和我们常用的background属性比较相似。例如: background:url(xx.jpg) 10px 20px no-repeat; 根据border-image的语法:#border-image{ background:#F4FFFA; width:210px; height:210px; border:70px solid #ddd; border-image:url(borderimg.png) 70 repeat } 边角部分为裁掉了,可见repeat就是一直重复,然后超出部分剪裁掉,而且是居中开始重复。 Round 参数:Round可以理解为圆满的铺满。为了实现圆满所以会压缩(或拉伸); #border-image { width:170px; height:170px; border:70px solid; border-image:url(borderimg.png) 70 round; } Stretch 很好理解就是拉伸,有多长拉多长。有多远“滚”多远。 border-image:url(borderimg.png) 70 stretch 注意:Chrome下,中间部分也会被拉伸,webkit浏览器对于round属性和repeat属性似乎没有区分,显示效果是一样的。 Firefox 26.0 下是可以准确区分的。查看全部
-
box-shadow是向盒子添加阴影。支持添加一个或者多个。 很简单的一段代码,就实现了投影效果,酷毙了。我们来看下语法: box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 注意:inset 可以写在参数的第一个或最后一个,其它位置是无效的。 为元素设置外阴影: 示例代码: .box_shadow{ box-shadow:4px 2px 6px #333333; } 为元素设置内阴影: 示例代码: .box_shadow{ box-shadow:4px 2px 6px #333333 inset; } 添加多个阴影: 以上的语法的介绍,就这么简单,如果添加多个阴影,只需用逗号隔开即可。如: .box_shadow{ box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset; } 设置inset时为内部阴影,省略则为外阴影。查看全部
-
“:last-child”选择器与“:first-child”选择器作用类似,不同的是“:last-child”选择器选择的是元素的最后一个子元素。例如,需要改变的是列表中的最后一个“li”的背景色,就可以使用这个选择器,查看全部
-
ol>li=选择ul标签下的子元素li ol li=选择ul标签下的后代元素li “:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素。 ol > li:first-child{ color: red; }查看全部
-
target查看全部
-
:empty选择器表示的就是空。用来选择没有任何内容的元素,这里没有内容指的是一点内容都没有,哪怕是一个空格。查看全部
-
否定选择器,选择除了某个元素之外的所有元素。 例 input:nio([type="submit"])/*选择除了input下submit之外的元素*/查看全部
-
:root{}根选择器。匹配元素E所在文档的根元素 HTML中即<html>查看全部
-
^开头 $结尾 *任意字符查看全部
-
transform:rotate(旋转角度) 兼容问题: -moz-对应 Firefox, -webkit-对应 Safari and Chrome -o- for Opera -ms- for Internet Explorer查看全部
-
用逗号隔开每组 background 的缩写值; 如果有 size 值,需要紧跟 position 并且用 "/" 隔开; 如果有多个背景图片,而其他属性只有一个(例如 background-repeat 只有一个),表明所有背景图片应用该属性值。 background-color 只能设置一个。查看全部
-
background-size:auto 长度值 百分比 cover contain查看全部
举报
0/150
提交
取消