-webkit-、-moz-、-o-、-ms-这四个前缀
-ms代表ie内核识别码
-moz代表火狐内核识别码
-webkit代表谷歌内核识别码
-o代表欧朋【opera】内核识别码
设置文字溢出隐藏,超出的用省略号显示
p{
text-overflow: ellipsis;
overflow: hidden;
height: .8rem;
white-space: nowrap;
}
引用自己的字体 @font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */}div{font-family:myFirstFont;}url('Sansation_Light.woff')
.div4 { /** 多行文本溢出使用了webkit的css扩展属性,只是用于webkit浏览器以及移动端 -webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性: display:-webkit-box;必须结合的属性,将对象作为弹性伸缩盒子模型显示。 -webkit-box-orient必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式。 */ display: -webkit-box !important; overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 3; width: 500px; border: 1px solid red; }
文本装饰: h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;}
文本转换 p {text-transform:uppercase;} p{text-transform:lowercase;} p{text-transform:capitalize;}
把段落设置为小型大写字母字体 font-variant:small-caps font-variant:inherit 继承父元素的font-variant属性值
给段落第一个单词设置样式 p:first-letter{ color:#ff0000; font-size:xx-large; } 给段落第一行设置样式 p:first-line{ color:#0000ff; font-variant:small-caps; }
指定字符间的间距 letter-space:2px; 指定行间距 line-height:100px; 指定单词间的空白空间 word-spacing:50px; 禁止文本换行 white-space:nowarp; 给文本添加阴影 text-shadow:2px 2px 2px #ff0000;(水平距离,垂直距离,模糊距离,颜色)
链接样式:必须按顺序 a:link {color:#000000;} /* 未访问链接*/ a:visited {color:#00FF00;} /* 已访问链接 */ a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */ a:active {color:#0000FF;} /* 鼠标点击时 */
关于元素背景 background-color background-image background-repeat background-attachment 背景图片位置 可固定fixed background-position background:#ffffff url('img_tree.png') no-repeat right top;
关于列表标记 ul.a {list-style-type: circle;} 空心圆 ul.b {list-style-type: square;} 实心方形 ol.c {list-style-type: upper-roman;} 罗马 ol.d {list-style-type: lower-alpha;} a,b,c 设置标记为图片 ul{list-style-image: url('sqpurple.gif');} ul{list-style: square url("sqpurple.gif");} 如果使用缩写属性值的顺序是: list-style-type list-style-position (有关说明,请参见下面的CSS属性表) list-style-image 设置标记为图片浏览器兼容写法 ul { list-style-type: none; padding: 0px; margin: 0px; } ul li { background-image: url(sqpurple.gif); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 14px; }
![]()
<body> <p>请把鼠标移动到单词上,可以看到鼠标指针发生变化:</p> <span style="cursor:auto">auto</span><br> <span style="cursor:crosshair">crosshair</span><br> <span style="cursor:default">default</span><br> <span style="cursor:e-resize">e-resize</span><br> <span style="cursor:help">help</span><br> <span style="cursor:move">move</span><br> <span style="cursor:n-resize">n-resize</span><br> <span style="cursor:ne-resize">ne-resize</span><br> <span style="cursor:nw-resize">nw-resize</span><br> <span style="cursor:pointer">pointer</span><br> <span style="cursor:progress">progress</span><br> <span style="cursor:s-resize">s-resize</span><br> <span style="cursor:se-resize">se-resize</span><br> <span style="cursor:sw-resize">sw-resize</span><br> <span style="cursor:text">text</span><br> <span style="cursor:w-resize">w-resize</span><br> <span style="cursor:wait">wait</span><br> </body>
设置图片透明度: opacity:.4; /后代元素会继承父元素的opacity filter:alpha(opacity=40) //适用于IE8及更早版本
将表格标题显示在表格下方 :caption{caption-side:bottom;}
css3系列
css盒阴影 div{box-shadow: 10px 10px 5px #888888;}
边界图片:
#round{ -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */ -o-border-image:url(border.png) 30 30 round; /* Opera */ border-image:url(border.png) 30 30 round;
} #stretch{ -webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 and older */ -o-border-image:url(border.png) 30 30 stretch; /* Opera */ border-image:url(border.png) 30 30 stretch; }
背景图可以有多个:
#example1 {background-image: url(img_flwr.gif), url(paper.gif); background-position: right bottom, left top;
background-repeat: no-repeat, repeat; }
background-clip属性:
background-clip: padding-box;
background-clip: content-box;
background-clip: border-box;
background-clip: text;
-webkit-background-clip:text;只显示文字部分,此时还得设置 -webkit-text-fill-color:transparent
css3线性渐变:
1、从上到下的线性渐变
#grad { background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(red, blue); /* 标准的语法 */
}
2、从左到右的渐变
#grad { background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, red , blue); /* 标准的语法 */
}
3、对角线性渐变
#grad { background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */}
4、重复的线性渐变
#grad { /* Safari 5.1 - 6.0 */
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* Opera 11.1 - 12.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* Firefox 3.6 - 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* 标准的语法 */
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
css3径向渐变
1、颜色节点均匀分布
#grad { background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */ background: radial-gradient(red, green, blue); /* 标准的语法 */
}
2、颜色节点不均匀分布
#grad { background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */
}
3、设置径向渐变的形状(ellipse:椭圆(默认),circle:圆形)
#grad { background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */}
4、重复的径向渐变
#grad { /* Safari 5.1 - 6.0 */
background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
/* Opera 11.6 - 12.0 */
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
/* Firefox 3.6 - 15 */
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
/* 标准的语法 */
background: repeating-radial-gradient(red, yellow 10%, green 15%);}
css3 2D转换
div{transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}
css3 过渡
width: 100px;div{
height: 100px;
background: red;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s, transform 2s}
div:hover{ width: 200px; height: 200px; -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ transform: rotate(180deg);
}
css3动画
1.自定义动画名:
@keyframes myfirst{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframesmyfirst/* Safari 与 Chrome */{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
@-o-keyframes myfirst /* Opera */
2.animate属性
div{
animation: myfirst 5s linear 2s infinite alternate; /* Safari 与 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;}/*依次是:动画名、动画持续时间、动画运行速度、动画延迟时间、是否无限循环、是否逆向运动
css3多列
div {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3; /*将文本分为3列*/
}
设置元素是否可让用户调整: resize:both(宽高均可调整)/none/horizontal(可调整宽度)/vertical(可调整高度)
设置图片为缩略图:img {border: 1px solid #ddd;border-radius: 4px;padding: 5px;}
多媒体查询:
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}@media screen and (max-width: 1000px) and (min-width: 700px){}