慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

二多

变形--原点 transform-origin 任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。 transform-origin取值和元素设置背景中的background-position取值类似，如下所示：关键词百分比 top=top center=center top 50% 0 righ=right center=center right 100%或（100% 50%） bottom=bottom center=center bottom 50% 100% left=left center=center left 0或（0 50%） center =center center 50%或（50% 50%） top left=left top 0 0 right top=top right 100% 0 bottom right=right bottom 100% 100%

查看全部

0 采集收起来源：CSS3中的变形--原点 transform-origin
2015-05-27
二多

matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵，我在这里只是简单的说一下CSS3中的transform有这么一个属性值，如果需要深入了解，需要对数学矩阵有一定的知识。 (⊙o⊙) abcdef a\d 水平、垂直伸缩量，1表示原始大小 b\c 纵向、横向扭曲，0为不变 e、f 水平、垂直偏移量，0为初始位置

查看全部

0 采集收起来源：CSS3中的变形--矩阵 matrix()
2015-05-27
二多

translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。 1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动） 2、translateX(x)仅水平方向移动（X轴移动） 3、translateY(Y)仅垂直方向移动（Y轴移动） demo code :使用translate实现宽高不固定元素，水平垂直居中

查看全部

0 采集收起来源：CSS3中的变形--位移 translate()
2015-05-27
二多

缩放 scale()函数让元素根据中心原点对对象进行缩放。 scale:变形--缩放，有三种使用方法：（1）scale(x,y):水平和垂直方向同时缩放；（2）scaleX(x):仅水平方向缩放；（3）scaleY(Y):仅垂直方向缩放；

查看全部

0 采集收起来源：CSS3中的变形--缩放 scale()
2015-05-27
二多

扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。

查看全部

0 采集收起来源：CSS3中的变形--扭曲 skew()
2015-05-27
二多

旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转

查看全部

0 采集收起来源：CSS3变形--旋转 rotate()
2015-05-27
宇风_s

设置背景图片的其实位置：是从边框区域开始从padding区域开始还是从内容区域开始展示背景图片？通过绝对定位相对定位的使用实现在padding区域放置相关的内容。

查看全部

0 采集收起来源：CSS3背景 background-origin
2015-05-27
error_zz

.。。。

查看全部

0 采集收起来源：CSS3 跨列设置column-span
2015-05-27
宇风_s

实现背景的渐变效果！

查看全部

0 采集收起来源：CSS3颜色渐变色彩
2015-05-27
宇风_s

通过rgba(,,,）可以设置透明效果。

查看全部

0 采集收起来源：CSS3颜色颜色之RGBA
2015-05-27
宇风_s

实现圆实心上半圆实心左半圆以及圆角效果的实现

查看全部

0 采集收起来源：CSS3边框圆角效果 border-radius
2015-05-27
慕标3752996

box-sizing: content-box（默认值） | border-box content-box物体的宽度=width+padding+border border-box物体的宽度=width，如果设置了padding和border的话，宽度会自动减小即width=宽度（自动减小了）+padding+border

查看全部

0 采集收起来源：CSS3 盒子模型
2015-05-27
慕标3752996

column-count:分成几列 column-gap:每列之间的间距 column-rule：每列的边框 column-span：是否跨栏 all|none 两个参数

查看全部

0 采集收起来源：CSS3 跨列设置column-span
2015-05-27
慕标3752996

column-count:分为几列列数 column-gap:列间距 column-rule:列边框与 border相似

查看全部

0 采集收起来源：CSS3 列表边框column-rule
2015-05-27
学也

@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。语法： @font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径; } 这样设置之后，就可以像使用普通字体一样在（font-*）中设置字体样式。比如： p { font-size :12px; font-family : "My Font"; /*必须项，设置@font-face中font-family同样的值*/ }

查看全部

0 采集收起来源：CSS3文字与字体嵌入字体@font-face
2018-03-22

首页上一页 928 929 930 931 932 933 934 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下，建议使用 chrome、safari、firefox、opera浏览器学习本课程。

老师告诉你能学到什么？: 1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果