首页 > 代码库 > CSS3的使用方法解析
CSS3的使用方法解析
自己过去有段时间使用CSS3开发过一些小的部件和效果，但是由于太久没有再次去使用，导致当自己再次去使用的时候我就需要去翻手册重新找一次然后按着方法使用才可以。
现在我就把这份CSS3的使用技巧展示给各位开发朋友们，希望对你们的使用有帮助。
顺带，我会在后面把我整理的一整套CSS3，PHP,MYSQL的开发的笔记打包放到百度云，有需要可以直接去百度云下载，这样以后你们开发就可以直接翻笔记不用百度搜那么麻烦了。
笔记链接：http://pan.baidu.com/s/1qYdQdKK 密码：pvj2
一、css3背景与边框相关样式
下面主要介绍了 几个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;
用于对图片进行拉伸，四个值依次意思为：左 上 右 下（正方形的四边来说）
二、CSS3动画
CSS3动画是CSS3的核心功能，这个是很常用的。而且也很重要。
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;
三、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变大）
四、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：
当内联内容溢出块容器时，将溢出部分替换为（...）。
五、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;
}
六、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);
七、伪类选择符
这个伪类样式很常用。
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;
}
八、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
CSS3的使用方法解析
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。