css3简记,了解一下?

云端漂移 2019-06-27

0、前言

css3常用属性在用的时候总有那么一两点记不住,每次去搜教程,重复做功,自己动手,在这简记一下,加深印象。

1、css3圆角border-radius (IE9+)

使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角"。如果你要在四个角上一一指定,可以使用以下规则:

  • 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角;
  • 三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角;
  • 两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角;
  • 一个值:四个圆角值相同;

用纯css3写一个Opera浏览器logo,

css3简记,了解一下?

.opera-outer {
    width: 258px;
    height: 278px;
    background-color: #f22629;    
    border-radius: 129px/139px;
    position: relative;
}
.opera-inner {
    width: 116px;
    height: 236px;
    background-color: #fff;    
    border-radius: 58px/118px;
    position: absolute;
    left: 70px;
    top: 20px;
}

get到知识点:
border-radius: 129px/139px;这种写法,129px是椭圆水平半径,139px是椭圆垂直半径。当椭圆半径和超出宽高时,会自动缩放椭圆以满足镶嵌在矩形里。

css3简记,了解一下?

css3简记,了解一下?

2、css3背景

2.1 background-image (ie9+)

添加多背景图片

background: url( "../image/img_flwr.gif" ) right bottom no-repeat, url("../image/paper.gif") left top repeat;

等价于

background-image: url("../image/img_flwr.gif"), url("../image/paper.gif");
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;

2.2 background-orign(ie9+)

指定了背景图像的位置区域,取值:border-boxpadding-boxcontent-box

2.3 background-clip(ie9+)

背景剪裁属性是从指定位置开始绘制,取值:border-boxpadding-boxcontent-box

综合知识点绘制如下

background: url( "../image/img_flwr.gif" ) right bottom no-repeat, url("../image/paper.gif") left top repeat;
border: 20px solid rgba( 0, 0, 0, 0.1 );
padding: 20px;
background-origin: border-box;
background-clip: content-box;

css3简记,了解一下?

3、css3渐变 linear-gradient (IE10+)

3.1 默认从上到下渐变

#grad {
  background: -webkit-linear-gradient(red, yellow); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(red, yellow); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(red, yellow); /* Firefox 3.6 - 15 */
  background: linear-gradient(red, yellow); /* 标准的语法 */
}

3.2 从左向右渐变

#grad {
  background: -webkit-linear-gradient(left, red, yellow); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(left, red, yellow); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(left, red, yellow); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, red, yellow); /* 标准的语法 */
}

css3简记,了解一下?

3.3 有角度的变换

css3简记,了解一下?

#grad {
  background: -webkit-linear-gradient(90deg, red, yellow); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(90deg, red, yellow); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(90deg, red, yellow); /* Firefox 3.6 - 15 */
  background: linear-gradient(90deg, red, yellow); /* 标准的语法 */
}

3.4 对角线

#grad {
  background: -webkit-linear-gradient(left top, red, yellow); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(left top, red, yellow); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(left top, red, yellow); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right bottom, red, yellow); /* 标准的语法 */
}

css3简记,了解一下?

3.5 重复线性渐变 repeating-linear-gradient

#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简记,了解一下?

3.6 径向渐变 radial-gradient

#grad {
  /* Safari 5.1 - 6.0 */
  background: -webkit-radial-gradient(circle, red 5%, yellow 15%, green);
  /* Opera 11.1 - 12.0 */
  background: -o-radial-gradient(circle, red 5%, yellow 15%, green);
  /* Firefox 3.6 - 15 */
  background: -moz-radial-gradient(circle, red 5%, yellow 15%, green);
  /* 标准的语法 */
  background: radial-gradient(circle, red 5%, yellow 15%, green);
}

css3简记,了解一下?

3.7 重复径向渐变 repeating-radial-gradient

#grad {
  /* Safari 5.1 - 6.0 */
  background: -webkit-repeating-radial-gradient(red, yellow 5%, green 10%);
  /* Opera 11.1 - 12.0 */
  background: -o-radial-repeating-gradient(red, yellow 5%, green 10%);
  /* Firefox 3.6 - 15 */
  background: -moz-radial-repeating-gradient(red, yellow 5%, green 10%);
  /* 标准的语法 */
  background: repeating-radial-gradient(red, yellow 5%, green 10%);
}

css3简记,了解一下?

4、css3文本效果

4.1 text-shadow (IE10+)

text-shadow: 4px 4px 4px #F00; (x轴偏移量,y轴偏移量,阴影模糊半径,阴影颜色)

css3简记,了解一下?

4.2 box-shadow (IE9+)

box-shadow: 0px 0px 4px 4px #ccc;(x轴偏移量,y轴偏移量,阴影模糊半径,阴影拓展半径,阴影颜色)

css3简记,了解一下?

多个阴影之间用逗号分隔
box-shadow: 0px -4px 4px 0px black,0px 4px 4px 0px red,4px 0px 4px 0px green,-4px 0px 4px 0px blue;

css3简记,了解一下?

注意,当有两个阴影重叠时,在前面设置阴影在上层

在低版本的ie下使用shadow滤镜,filter:progid:DXImageTransform.Microsoft.Shadow(color=’颜色值’, Direction=阴影角度(数值),Strength=阴影半径(数值));

注意:该滤镜必须配合background属性一起使用,否则该滤镜失效。

4.3 text-overflow (IE9+)

指定应向用户如何显示溢出内容

overflow: hidden;
text-overflow: ellipsis; /* clip */
white-space: nowrap; /*文本在同一行,直到有<br>标签*/
/*可能取值:normal默认换行,空白忽略, pre行为类似标签pre,nowrap不换行,pre-wrap空白换行,pre-line合并空格换行*/

4.4 word-wrap break-word

word-wrap: break-word; /* 允许长文本换行 */
break-word: all-break; /* 允许单词拆分换行 */

5、css3 2D转换 (IE10+ IE9 -ms)

5.1 translate 偏移

IE9需要-ms前缀,Safari和chrome需要-webkit前缀

transform: translate(<length>[, <length>]); // 第一个参数x方向长度,第二个参数y方向长度
transform: translateX(<length>);
transform: translateY(<length>);

5.2 rotate 旋转

transform: rotate(ndeg);

5.3 scale 缩放

transform: scale(<number>[, <number>]);
transform: scaleX(<number>);
transform: scaleY(<number>);

5.4 skew 倾斜

transform: skew(<angle> [, <angle>]);
transform: skewX(<angle>);
transform: skewY(<angle>);

5.5 matrix 矩阵转换

matrix(<number>,<number>,<number>,<number>,<number>,<number>):
以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f]变换矩阵

6、css3 3D转换 (IE10+)

6.1 rotateX 绕x轴旋转

transform: rotateX(ndeg);

6.2 rotateY绕y轴旋转

transform: rotateY(ndeg);

7、css3 过渡 transition(IE10+)

css3过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点,必须规定两项内容:指定添加效果的css属性,指定效果的持续时间。

transition-property
检索或设置对象中的参与过渡的属性

transition-duration
检索或设置对象的持续时间

transition-timing-function
检索或设置对象中过渡的动画类型

transition-delay
检索或设置对象延迟过渡的时间

For Example:
可以为同一个元素的多个属性定义过渡效果
缩写:

transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;

等价拆分:

transition-property:border-color,background-color,color;
transition-duration:.5s;
transition-timing-function:ease-in;
transition-delay:.1s;

过渡类型

  • linear

线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)

  • ease

平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)

  • ease-in

由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)

  • ease-out

由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)

  • ease-in-out

由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

  • step-start

等同于 steps(1, start)

  • step-end

等同于 steps(1, end)

  • steps(<integer>[, [ start | end ] ]?)

接受两个参数的步进函数。第一个参数必须为正整数,指定函数的步数。第二个参数取值可以是start或end,指定每一步的值发生变化的时间点。第二个参数是可选的,默认值为end。

  • cubic-bezier(<number>, <number>, <number>, <number>)

特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内

8、css3 动画animation (IE10+)

8.1 @keyframes

要创建css3动画,@keyframes是必不可少的,它用来指定一个css样式和动画将逐步从目前的样式更改为新的样式。

@keyframes mykeyfreames {
form: {},
to: {}
}

8.2 animation

动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。0% 是动画的开始,100% 是动画的完成。为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。

  • animation-name:

检索或设置对象所应用的动画名称

  • animation-duration:

检索或设置对象动画的持续时间

  • animation-timing-function:

检索或设置对象动画的过渡类型

  • animation-delay:

检索或设置对象动画延迟的时间,默认为0

  • animation-iteration-count:

检索或设置对象动画的循环次数,无限次 definite

  • animation-direction:

检索或设置对象动画在循环中是都反向运动,
取值:normal, reverse(反向播放), alternate(奇数次正向播放,偶数次反向播放), alternate-reverse(奇数次反向播放,偶数次正向播放)

  • animation-play-state:

检索或设置对象动画的状态,w3c考虑移除

9、结合transition,box-shadow,translate写一个iphone-switch

/* css */
/* 开关按钮背景 */
.iphone-switch {
    display: inline-block;
    width: 42px;
    height: 20px;
    border: 1px solid #aaa;
    border-radius: 10px;
    background-color: #eee;
     -webkit-box-shadow: inset 0 0 0 0 #ddd;
    box-shadow: inset 0 0 0 0 #ddd;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
/* 用伪元素:before做开关 */
.iphone-switch:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background-color: #fff;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}

.iphone-switch.checked {
 -webkit-box-shadow: inset 0 0 0 10px #4bed90; 
    box-shadow: inset 0 0 0 10px #4bed90; 
}

.iphone-switch.checked:before {
    -webkit-transform: translate(22px, 0px);
    transform: translate(22px, 0px);
}
// js
$( ".iphone-switch" ).click( function() {
    $(this)[ $(this).hasClass( "checked" ) ? "removeClass" : "addClass" ]( "checked" );
} );

css3简记,了解一下?

完~

相关推荐