-
属性选择器急功能描述： E[att^="value"]，选择匹配元素E，且E定义了属性att，其属性值以value 开头 的任何字符串。 E[att$="value"]，选择匹配元素E，且E定义了属性att，其属性值以value 结束 的任何字符串。 E[att*="value"]，选择匹配元素E，且元素定义了属性att，其属性值任意位置 包含 了"val"。换句话说，这字符串与属性中的任意位置相匹配 例子： html代码： <a href="xxx.pdf">我链接的是PDF文件</a> <a href="#" class="icon">我类名是icon</a> <a href="#" title="我的title是more">我的title是more</a> css代码 a[class^=icon]{ background: green; color:#fff; } a[href$=pdf]{ background: orange; color: #fff; } a[title*=more]{ background: blue; color: #fff; }查看全部
-
multiple backgrounds多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，缩写时为用逗号隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值 语法缩写： background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],... 注意：用逗号隔开每组background的缩写值；如果有size值，需要紧跟position并且用"/"隔开；分解写法时，background-color只能设置一个查看全部
-
background-size设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩 语法： background-size: auto | <长度值> | <百分比> | cover | contain 参数： auto：默认值，不改变背景图片的原始高度和宽度 <长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放 <百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上 cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器 contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止查看全部
-
background-clip用来将背景图片做适当的裁剪以适应实际需要 语法： background-clip ： border-box | padding-box | content-box | no-clip 参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。 no-clip表示不裁切，和参数border-box显示同样的效果。 backgroud-clip默认值为border-box查看全部
-
background-origin设置元素背景图片的原始起始位置 语法： background-origin ： border-box | padding-box | content-box; 参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。 需要注意的是，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。查看全部
-
@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体 语法： @font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径; } 这样设置之后，就可以像使用普通字体一样在（font-*）中设置字体样式。 例子： p { font-size :12px; font-family : "My Font"; /*必须项，设置@font-face中font-family同样的值*/ }查看全部
-
text-overflow用来设置是否使用一个省略标记（...）标示对象内文本的溢出。 语法： text-overflow:clip|ellipsis clip表示剪切，ellipsis表示显示省略标记 要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果，代码如下： text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 同时，word-wrap也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。 语法： word-wrap:normal|break-word normal为浏览器默认值，break-word设置在长单词或 URL地址内部进行换行，此属性不常用，用浏览器默认值即可。查看全部
-
text-shadow可以用来设置文本的阴影效果。 语法： text-shadow:X-offset Y-offset blur color 参数： X-offset表示阴影的水平偏移距离，值是正值时阴影向右偏移，是负值时向左偏移 Y-offset表示阴影的垂直偏移距离，值是正值时阴影向下偏移，是负值时向上偏移 Blur是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰， 如果不需要阴影模糊可以将Blur值设置为0 Color是指阴影的颜色，其可以使用rgba色。查看全部
-
animation-play-state属性主要用来控制元素动画的播放状态。查看全部
-
CSS3 Gradient分为线性渐变(linear)和径向渐变(radial)。 语法： linear-gradient(to bottom,#fff,#999) 参数：linear-gradient是渐变类型，径向为radial to bottom是渐变方向，表示方向的关键词 #fff,#999表示颜色的起始点和结束点，可以有两至多个色值 渐变方向，可以用"角度"的关键词或"英文"来表示 角度 英文 作用 0deg to top 从下到上 90deg to right 从左到右 180deg to bottom 从上到下 270deg to left 从右到左 to top left 从右下角到左上角 to top right 从左下角到右上角 第一个参数省略时，默认为180deg,等同于to bottom查看全部
-
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);查看全部
-
border-image是为边框应用背景图片。 语法： border-image:url(xx.jpg) 70 70 70 70 repeat; 参数：四个70是切割图片的宽度，单位为像素，但省略px也可以使用百分比，遵循顺时针的规律来分别设置，也可以简写为70。 repeat是图片延伸方式：三个可选参数分别为round(平铺)、repeat(重复)、stretch(拉伸) 例子： #border-image{ background:#F4FFFA; width:210px; height:210px; border:70px solid #ddd; border-image:url(borderimg.png) 70 repeat }查看全部
-
box-shadow是向盒子添加阴影。支持添加一个或者多个。 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 参数介绍： X轴偏移量，是必需的，水平阴影的位置，允许负值。 Y轴偏移量，是必需的，垂直阴影的位置，允许负值。 阴影模糊半径，是可选的，模糊距离 阴影扩展半径，是可选的，阴影的尺寸 阴影颜色，是可选的，阴影的颜色，省略默认为黑色 投影方式，是可选的，设置inset时为内部阴影方式，如果省略为外阴影方式。注意：inset可以写在参数的第一个或最后一个，其他位置是无效的。 例子：为元素设置外阴影： .box_shadow{ box-shadow:4px 2px 6px #333333; }查看全部
-
但需要值得注意的一点：第一个时间的值为 transition-duration，第二个为transition-delay查看全部
-
border-radius是向元素添加圆角边框。 border-radius的值不仅能用px单位，你还可以用百分比或者em，但兼容性目前还不太好。 实心上半圆： div{ height:50px;/*是width的一半*/ width:100px; background:#9da; border-radius:50px 50px 0 0;/*半径至少设置为height的值*/} 实心圆： div{ height:100px;/*与width设置一致*/ width:100px; background:#9da; border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/ }查看全部
举报
0/150
提交
取消