css3简记，了解一下？

头像
wuwhs
    阅读 9 分钟
    1

    0、前言

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

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

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

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

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

    opera

    .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是椭圆垂直半径。当椭圆半径和超出宽高时，会自动缩放椭圆以满足镶嵌在矩形里。

    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-box，padding-box，content-box。

    2.3 background-clip（ie9+）

    背景剪裁属性是从指定位置开始绘制，取值：border-box，padding-box，content-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;

    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); /* 标准的语法 */
}

    3.3 有角度的变换

    #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); /* 标准的语法 */
}

    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%);
}

    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);
}

    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%);
}

    4、css3文本效果

    4.1 text-shadow (IE10+)

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

    4.2 box-shadow (IE9+)

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

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

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

    在低版本的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" );
} );

    完~

    css3css3动画
    wuwhs
    6k 声望2.5k 粉丝

    Code for work, write for progress!

    « 上一篇
    element-ui更换主题和按需引入组件
    下一篇 »
    尾调用优化——记一道面试题的思考

    引用和评论

    推荐阅读
    头像
    从0-1企业微信自建应用开发

    wuwhs阅读 1.8k

    头像
    开发插件集合

    寒青赞 12阅读 3.2k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.6k

    头像
    纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

    XboxYan赞 12阅读 1.6k

    头像
    CSS 实现带tooltip的slider

    XboxYan赞 6阅读 1.1k

    头像
    给线条类型的svg图标加上绘制的动画效果

    热饭班长赞 2阅读 405

    头像
    盘点CSS文本两端对齐的N种方式

    XboxYan赞 1阅读 1.5k

    0 条评论
    得票最新