5-1_CSS页面元素修饰.ppt

CSS3页面元素修饰 黄永文 email：lanf@ QQ: tel： CSS3圆角 border-radius属性 border-radius（含义是“边框半径”）。 为这个属性提供一个值，就能同时设置四个圆角的半径。 所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。 一个div方框 border-radius: 15px; border-radius参数 可以同时设置1到4个值： 设置1个值，表示4个圆角都使用这个值 设置两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。 设置三个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。 设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。 　border-radius: 15px 5px; border-radius: 15px 5px 25px; border-radius: 15px 5px 25px 0px; border-radius参数 可以用斜杠设置第二组值。 第一组值表示水平半径 第二组值表示垂直半径 第二组值也可以同时设置1到4个值，应用规则与第一组值相同 border-radius: 15px 5px / 3px; border-radius: 15px 5px 25px / 3px 5px; border-radius: 15px 5px 25px 5px / 3px 5px 10px 15px; 单个圆角的设置 * border-top-left-radius * border-top-right-radius * border-bottom-right-radius * border-bottom-left-radius 都可以同时设置1到2个值 设置1个值，表示水平半径与垂直半径相等 设置2个值，第一个值表示水平半径，第二个值表示垂直半径。 border-top-left-radius: 15px; border-top-left-radius: 15px 5px; ? border-top-left-radius: 10px; ?? border-top-right-radius: 20px; ?? border-bottom-right-radius: 30px; ?? border-bottom-left-radius: 40px; 制作圆角按钮 CSS3 Transform Transform字面上就是变形，改变的意思 旋转rotate 扭曲skew 缩放scale 移动translate 矩阵变形matrix 语法： transform ： none | transform-function [ transform-function ]* transform: rotate | scale | skew | translate |matrix; 旋转rotate rotate(angle) ：通过指定的角度参数对原元素指定一个2D rotation（2D 旋转），需先有transform-origin属性的定义。transform-origin定义的是旋转的基点，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。 transform:rotate(30deg): 移动translate 移动translate分为三种情况 translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）； translateX(x)仅水平方向移动（X轴移动）； translateY(Y)仅垂直方向移动（Y轴移动 translate(translation-value[, translation-value]) ：通过矢量[tx, ty]指定一个2D translation，tx 是第一个过渡值参数，ty 是第二个过渡值参数选项。 translate(x,y),它表示对象进行平移，按照设定的x,y参数值,当值为负数时，反方向移动物体，其基点默认为元素 中心点，也可以根据transform-origin进行改变基点。 transform:translate(100px,20px): transform:translate translateX(translation-value) ： 通过给定一个X方向上的数目指定一个translation。只向x轴进行移动元素，同样其基点是元素中心点，也可以根据transform-origin改变基点位置。 transform:translateX(100px): 缩放scale