大洋网络CSS3核心知识整理
文件作者:admin 录入日期:2015-7-21

Mozilla(Firefox,Flock)

WebKit(Safari、Chrome)

Opera(presto)

Trident(IE)


-----------------------------------------------------
          响应式


最小的分辨率:100像素
@media screen and (min-width:100px){


}

@media (min-width:100px){


}

最大分辩率:100px;
@media screen and (max-width:100px){


}

-----------------------------------------------------
  边框border-radius

(1)width:200px;

   画出一个圆: 
   border-radius:100px; 半径为100;  
   border-radius:50%; 也是一个圆
 

  阴影box-shadow


box-shadow:X轴 Y轴 模糊程度  阴影颜色;
如:
box-shadow:20px 2px 3px #000;
可以是负数


  图像边框 border-image


(1)用在边框的图片路径:
border-image-source:Url();

(2)图片向内偏移:
border-image-slice:值;

(3)图片边框的宽度:
border-image-width:值;

(4)图像超出边框的量:
border-image-outset:值;

(5)图像是否重复:

border-image-repeat:

repeat:重复

round:铺满

stretch:拉伸

 

  背景background
(1)多个背景图像:
background-image:url(1.jpg),url(2.jpg);

(2)设置背景图像大小:
background-size:100px 100px,200px 200px;


(3)设置背景图像定位:
background-position: 100px 100px,多参;

 


  文本处理text

(1)当DIV宽度不够时不换行
white-space:nowrap;

(2)文本阴影:
text-shadow:1px 1px 3px #000000;

(3)长单词自动折下来:
word-wrap:break-word;


  背景颜色透明

(1)背景的rgba颜色透明:
background-color:rgba(255,0,0,0.2);

opacity:0.5; 整体全透明.

 


  分列操作

-moz:火狐

-webkit:谷歌


(1)column-count:列的计数;

(2)column-gap:列之间的距离;

(3)column-width:一列大小;

(4)column-rule:边线样式;

 

 

  2D转换

(1)transform: rotate(10deg);
角度转换为 10度

 

(2)transform-origin:0 0;
以哪一个源点开始旋转 第一个:X轴  第二个:Y轴

 

 


(3)transform:scale(0.5,0.5):
缩放比例:

transform:scale(1,1);
-ms-transform:scale(1,1); /* IE 9 */
-moz-transform:scale(1,1); /* Firefox */
-webkit-transform:scale(1,1); /* Safari and Chrome */
-o-transform:scale(1,1); /* Opera */

 

(4)transform: skew(30deg,20deg);
 X 轴把元素翻转30度,围绕Y轴翻转20度。
 扭曲


(5)渐变应用:

分类:
 线型:linear-gradient

 径像:


(1)线型:

 

linear-gradient( [起始方向],开始颜色,结束颜色);

background:-moz-linear-gradient(left,#ace,#f96)
left:从左到右,
top:从上到下
left top: 左上到右下


(2)线型带有角度的设置
background: -moz-linear-gradient(45deg, #ace,#f96);
 

(3)带透明度:
background: -moz-linear-gradient(top,rgba(255,0,0,0.9),rgba(0,255,0,0.1));


-----------------------------------------------------
   CSS过度
(1)transition属性:

 语法:

 transition:参数1 参数2 参数3 参数4

参数1: 对哪些属性应用 如 width height 还有 all 所有

参数2: 在几秒/几毫秒内容完成

参数3: 是过渡的方式

参数4: 延时多少秒再开始

 

    animation动画制作
 
(1)定义关键帧

@keyframes 动画名字{
 
 第一种: 每个阶段百分比
 100%{
         background-color:#0F0;
      }


 第二种:
  from {background:red;}
         to {background:yellow;}
}

 

 

 

 


 

文章来源: 大洋网络 大连网站建设 大连网站制作 分享到:

Copyright @ 2013-2018 Corporation dlwangluo.com,All rights reserved
客服热线:0411-86394861 手机:13019478259 版权所有 大连大洋网络工作室
技术支持:大洋网络 QQ:1123072971 网站地图 百度google地图
辽ICP备12011267号-1  本站关键字:大连做网站