css3

2016-07-28 00:47:41   0  举报





仅支持查看

AI智能生成

CSS3是最新的CSS（级联样式表）标准，它提供了许多新的功能和特性，用于改善网页的外观和交互性。其中一些新特性包括圆角、阴影、渐变背景、动画效果等等。此外，它还引入了一些新的选择器，如属性选择器、伪类选择器等等，使得开发者可以更轻松地定位和样式化页面元素。CSS3还支持响应式设计，使网页在不同设备上具有更好的适应性。总之，CSS3是一项非常强大的技术，可以帮助开发者创建更加精美、动态和用户友好的网页。

作者其他创作

大纲/内容

背景

background-size

作用：改变背景图片的大小

用法：background-size: 背景宽度(背景相对于原背景的宽度) 背景高度(背景相对于原背景的高度)

background-origin

作用：决定背景图片所处的区域(有padding区域border区域和content区域)

用法：background-origin:content-box;

background-clip

作用：背景绘制区域

用法：background-clip:content-box

文本效果

text-shadow

作用：文字阴影

用法：text-shadow:阴影水平位置阴影竖直位置模糊半径阴影颜色

word-wrap

作用：对长单词进行拆分换行

用法：word-wrap:break-word;

过渡

transition

作用：为hover效果添加一个过渡过程

用法：transition: width 2s, height 2s, transform 2s; -moz-transition: width 2s, height 2s, -moz-transform 2s; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; -o-transition: width 2s, height 2s,-o-transform 2s;

动画

@keyframes

作用：创建动画

用法：@keyframes myfirst { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} } @-moz-keyframes myfirst /* Firefox */ { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} } @-webkit-keyframes myfirst /* Safari 和 Chrome */ { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} } @-o-keyframes myfirst /* Opera */ { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} }最后用animation绑定到div上

字体

@font-face

作用：在网页引用用户并不存在的字体。

用法：@font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */ } div { font-family:myFirstFont; }

2D转换

transform

rotate

作用：旋转

用法：transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */

translate

作用：元素移动

用法：transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ -o-transform: translate(50px,100px); /* Opera */ -moz-transform: translate(50px,100px); /* Firefox */

scale

作用：元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数

用法：transform: scale(2,4); -ms-transform: scale(2,4); /* IE 9 */ -webkit-transform: scale(2,4); /* Safari 和 Chrome */ -o-transform: scale(2,4); /* Opera */ -moz-transform: scale(2,4); /* Firefox */

skew

作用：元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

用法：transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ -o-transform: skew(30deg,20deg); /* Opera */ -moz-transform: skew(30deg,20deg); /* Firefox */

3D转换

rotateX(),Y(),Z()

translateX(),Y(),Z()

scaleX(),Y(),Z()

边框

border-radius

作用：圆角边框

用法：border-radius:5px;5px是圆角边框的半径

box-shadow

作用：块级元素阴影

用法：box-shadow:阴影水平位置阴影竖直位置模糊半径阴影尺寸阴影颜色阴影是内阴影还是外阴影

border-image