CSS3的使用方法解析
本身过去有段时间使用CSS3开发过一些小的部件和效果，可是因为过久没有再次去使用，致使当本身再次去使用的时候我就须要去翻手册从新找一次而后按着方法使用才能够。css
如今我就把这份CSS3的使用技巧展现给各位开发朋友们，但愿对大家的使用有帮助。html
顺带，我会在后面把我整理的一整套CSS3，PHP,MYSQL的开发的笔记打包放到百度云，有须要能够直接去百度云下载，这样之后大家开发就能够直接翻笔记不用百度搜那么麻烦了。css3
笔记连接：http://pan.baidu.com/s/1qYdQdKK 密码：pvj2web
1、css3背景与边框相关样式api
下面主要介绍了 几个CSS3函数的使用。函数
1.background-clip函数，用于背景图的显示位置。布局
1.background-clip:
padding-box --->边框之内有背景
content-box 只有内容行才有背景
border-box 边框一块儿都有背景
注意：须要配合 padding 的时候才有用
2.background-origin:
padding-box --->边框之内有背景
content-box 只有内容行才有背景
border-box 边框一块儿都有背景
主要是能够加一张背景图片，背景图片左上角显示（能够设置显示位置,前提是照片必须足够小）
3.background-image:url(""),url("");
background-repeat:repeat-x,no-repeat;
background-position:100%,100%,center; (能够设置图片的显示百分比位置)
主要用于显示两张背景图片，而且第一张要小于第二张，这样第一张图片在第二张的上面。（可多张叠加）
注意：建议图片为透明的，不的话会有分界
4.border-radius:10px 10px 10px 10px;(分别角为左 右 下右 下左)四个角
能够设置边框为圆角
5.-webkit-border-image:url("")10 10 10 10;
用于对图片进行拉伸，四个值依次意思为：左 上 右 下（正方形的四边来讲）
2、CSS3动画
CSS3动画是CSS3的核心功能，这个是很经常使用的。并且也很重要。post
1.transition:background 1s linear,width 1s linear,height 1s linear,transform 1s linear;
（能够对背景，其余任意元素进行设置，过分时间，linear 线性）
注意：还须要配上伪类进行一块儿实现渐变的效果
(属性那里能够用all, all指的是全部属性都赋予过渡效果)
也能够分开写：
transition-duration:1s;
transition-property:background,transform,width;
transition-timing-function:linear;
2.实现div颜色渐变的方法
div{
animation:anima(这个是动画名) 5s infinite alternate; /*infinite alternate 可不断重复播放动画*/
-webkit-animation:anima 5s infinite alternate;
}
@-webkit-keyframes mycolor{
0%{
background-color:blue;
}
35%{
background-color:green;
}
60%{
background-color:orange;
}
80%{
background-color:yellow;
}
100%{
background-color:aqua;
}
}
#div1:hover{
-webkit-animation:mycolor 10s linear;
}
3.实现图片旋转起来的效果
@-webkit-keyframes mycolor{
0%{
background-color:blue;
transform:rotate(0deg);
}
35%{
background-color:green;
transform:rotate(30deg);
}
60%{
background-color:orange;
transform:rotate(60deg);
}
80%{
background-color:yellow;
transform:rotate(30deg);
}
100%{
background-color:aqua;
transform:rotate(-30deg);
}
}
#div1:hover{
-webkit-animation:mycolor 5s ease;
}
注意：这几个是属性值 linear ease-in(慢快) ease-out（慢慢） ease(慢快) ease-in-out （慢快慢）
4.CSS3分列的效果(能够用来作图片的瀑布流)
-webkit-column-count:2; /*分两列*/
column-gap:50px;/* 间距 */
-webkit-column-gap:50px;/* 间距 */
column-rule:1px outset #ff0000;/* 间隔线设置 */
-webkit-column-rule:1px outset #ff0000;
column-width:250px;/* 设置列宽 */
-webkit-column-width:250px;
3、CSS3盒子相关样式字体
这个CSS3的盒子样式其实CSS也有，没有太多区别。动画
1.display 设置显示的背景长度 inline 显示为一条线，也就是元素多大就显示多少 inline-block和block同样 显示完这个div或span的长高 inline-table 只对table才有用，可让table上下的语句一条线显示 list-item 可让div像列表那样显示 2.overflow hidden 能够隐藏多余的 scroll 可让多余的不超出而后滚动看 overflow-x:hidden/scroll 让水平的隐藏或是滚动查看 white-space:nowrap 水平显示内容 3.box-shadow:10px 10px 10px #ccc;(分别对应 阴影左右偏移 上下偏移 模糊度 阴影颜色) 4.box-sizing:content-box/border-box; 必定要和padding 使用才会有变化 （content-box会让box变大，border-box不会让box变大）
4、CSS3文字与文字相关样式
主要是对字体进行修饰和制做的方法。
1.text-shadow:5px 5px 5px red,
9px 13px 10px blue,
8px 12px 10px #ccc;
字体阴影面积显示（同box-shadow）
2.本身设置字体
@font-face{
/* 能够设置字体 */
font-family:WebFont;
/* ttf :0 otf:t */
src:url('ygyxsziti2.0.ttf')format("truetype");
}
div{
font-family:WebFont;
}
3.font-size-adjust:0.57; 设置同类字体显示大小同样
4.text-transform:
capitalize：
将每一个单词的第一个字母转换成大写
uppercase：
将每一个单词转换成大写
lowercase：
将每一个单词转换成小写
5.white-space:
pre-wrap：
用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。
pre-line：
保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。
6. writing-mode 书写格式
-webkit-writing-mode:vertical-rl;
writing-mode:tb-rl;
horizontal-tb：
水平方向自上而下的书写方式。即 left-right-top-bottom（相似IE私有值lr-tb）
vertical-rl：
垂直方向自右而左的书写方式。即 top-bottom-right-left（相似IE私有值tb-rl）
vertical-lr：
垂直方向自左而右的书写方式。即 top-bottom-left-right
lr-tb：
左-右，上-下。对象中的内容在水平方向上从左向右流入，后一行在前一行的下面。 全部的字形都是竖直向上的。这种布局是罗马语系使用的（IE）
tb-rl：
上-下，右-左。对象中的内容在垂直方向上从上向下流入，自右向左。后一竖行在前一竖行的左面。全角字符是竖直向上的，半角字符如拉丁字母或片假名顺时针旋转90度。这种布局是东亚语系一般使用的（IE）
7.文本溢出
text-overflow:
clip：
当内联内容溢出块容器时，将溢出部分裁切掉。
ellipsis：
当内联内容溢出块容器时，将溢出部分替换为（...）。
5、CSS3选择器
所谓选择器是对这一类的所有均可以进行选择使用。
1.通配选择器
[id*=div]{ /*只要id有div的均可以被改变颜色*/
color:yellow;
}
[id^=div]{ /*只要id开头是div都被改变颜色*/
color:green;
}
[id$=y]{ /*只要id开头是y都被改变颜色*/
color:red;
}
2. div ~ p{
color:red;
}
同级div下面的p标签则被修改样式
例：
<div id="div1">
示例1
<div id="div2">
<h1>示例2</h1>
<p>fas</p>
<p>fas</p>
<p>fas</p>
</div>
<p>fas</p>
<p>fas</p>
<p>fas</p>
</div>
3. 能够设置p标签前面的首字母为红字
p:first-letter{
color:red;
}
也可让li先后部份内容添加进去
li:before{
content:"这个是首部";
color:blue;
}
li:after{
content:"这里是尾部了";
color:green;
font-size:13px;
}
4.
<!-- root根元素 -->
:root{
background:#ccc;
}
/* not 除了哪一个标签没有这个样式*/
div *:not(h1){
color:red;
}
/* empty 空元素补充样式*/
:empty{
background-color:yellow;
}
a:visited{color:blue;}
/* target 找到对象而后显示样式*/
:target{
background-color:orange;
}
5. /* first-child*/
li:first-child{
background:yellow;
}
/* last-child*/
li:last-child{
background:red;
}
/* nth-child(position) 根据子元素位置来选*/
li:nth-child(3){
background:green;
}
li:nth-last-child(2){
background:blue;
}
li:nth-last-child(odd){
/*设置为奇数显示颜色*/
background:orange;
}
li:nth-last-child(even){
/*设置为偶数显示颜色*/
background:green;
}
li:nth-last-child(even):hover{ /*还能够加伪类*/
/*设置为偶数显示颜色*/
color:blue;
}
注意：odd为奇数 even为偶数
6.
/* nth-of-type 只计算同类的第几个 */
h2:nth-of-type(odd){
background-color:yellow;
}
h2:nth-of-type(even){
background-color:red;
}
p:nth-last-of-type(odd){
background-color:orange;
}
7.让第几行有样式
<!--
nth-child(n)
an+b
意思是看你x列重复一次，则a为x
b则以此从0到n
-->
/* li:nth-child(5n+1){
background-color:aqua;
}
li:nth-child(5n+2){
background:#ccc;
}
li:nth-child(5n+3){
background:orange;
}
li:nth-child(5n+4){
background:blue;
}
li:nth-child(5n){
background:red;
}*/
/* only-child */
li:nth-child(1){
background-color: blue;
}
li:only-child{
/* 只有当ul li中只有li一个时候才会显示背景颜色*/
background-color: red;
}
8.
/* hover,foucs,active */
input[type="text"]:hover{
background:yellow;
}
input[type="text"]:focus{/*focus是焦点的意思*/
background:red; /*点击会变色*/
}
input[type="text"]:active{
background:blue;/*按住会变色*/
}
input[type="checkbox"]:checked{
outline:2px solid blue; /*能够有外边框*/
}
/* enabled，disabled */
input[type="text"]:enabled{
background-color:gold;
}
input[type="text"]:disabled{
/*
disabled 残废的，残疾的
enabled 激活的
*/
background-color:#666;
}
6、CSS3中的变形处理
这个是很经常使用的对图形进行修饰。
1.
/*旋转 缩放 移动 倾斜*/
/*旋转
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
*/
/* 缩放
transform:scale(1,5);
-webkit-transform:scale(1,5);
*/
/*倾斜
transform:skew(30deg,30deg);
-webkit-transform:skew(30deg,30deg);
*/
/*移动*/
transform:translate(0px,250px);
-webkit-transform:translate(0px,250px);
示例:
-webkit-transform:translateX(-100%);
transform:translateX(-100%);
2.图形变换基准点
transform-origin:right bottom;
3.图形变形处理能够合在一块儿写
transform:rotate(200deg) scale(2.5) skew(210deg,100deg);
7、伪类选择符
这个伪类样式很经常使用。
1.类型聚焦
E:focus { sRules }
input:focus{
background: #f6f6f6;
color: #f60;
border: 1px solid #f60;
outline: none;
}
2.除了这个没有 其余都有这个样式
E:not(s) { sRules }
p:not(.abc) {
color: #f00;
}
3.根属性
E:root { sRules }
html:root .test {
color: purple\0;
}
8、CSS3颜色渐变效果
1.颜色渐变
background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
示例:
background-image:-webkit-linear-gradient(
rgba(41,41,41,0.75) 0%,
rgba(54,54,54,0.72) 50%,
rgba(24,23,23,0.94) 51%);
2.颜色渐变属性:
background:-webkit-gradient(
linear,left top,right bottom,from(#6cc3fe),to(#21A1D0));
小知识点:
1.当须要对一些属性进行隐藏的时候能够用:overflow:hidden; 而后再对这个框用hover伪类进行设置left:0(隐藏前须要用到postion:absolute;left-width(对应的宽);)。而后就能够用hover进行显示内容框了。
2.也能够用display:none;(一开始让它显示的时候什么属性都没有);
而后当鼠标放上去的时候把它变成块 display:block;(而后就能够经过伪类加一个 height:0(没有高度就消失)等效果了。)
3.关于用label标签，能够用for="相对应id" 控制某个元素,拥有一样的css
而 ~ 可控制关联div 拥有一样的css样式
4.制做180度图片旋转换文字特效技巧：
<div id="all">
<div class="rotate">
<img src="">
<div class="wz">
文字内容
</div>
</div>
</div>
当要旋转的时候:
文字须要旋转180度，
rotate部分须要旋转180，(须要过分效果还要用到transition)
样式这样写: .con:hover .rotate{}
综上的所有都是很经常使用的CSS3样式修饰文本。其实CSS3能够经过看手册快速上手，因此很容易掌握。
笔记连接：http://pan.baidu.com/s/1qYdQdKK 密码：pvj2
相关文章
- 1. CSS3：RGBA的使用方法
- 2. css3 box-shadow 使用方法详解
- 3. CSS3 的calc()方法的使用
- 4. CSS3渐变的使用方法:
- 5. 解析JQuery中each方法的使用
- 6. CSS3中-webkit-overflow-scrolling: touch 的使用方法详解
- 7. JSONObject使用方法详解json解析
- 8. css3 calc()的用法 css3 calc()的用法
- 9. css3 transform方法经常使用属性
- 10. CSS3伪类使用方法实例
- 更多相关文章...
- • XML DOM 解析器 - XML DOM 教程
- • TCP报文格式解析 - TCP/IP教程
- • Git可视化极简易教程 — Git GUI使用方法
- • 常用的分布式事务解决方案
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
