css3的陌生新属性足迹

Posted 2020-07-03

　　一、css3边框

　　1、border-radius　

　　border-top-right-radius:右上角的圆角边框

　　border-top-left-radius:左上角的圆角边框

　　border-bottom-left-radius:左下角的圆角边框

　　border-bottom-right-radius:右下角的圆角边框

　　2、border-image

　　border-image属性分开写：

　　border-image-source:用在边框的图片的路径

　　border-image-slice:图片边框向内偏移

　　border-image-width:图片边框的宽度

　　border-image-outset:边框图片区域超出边框的量

　　border-image-repeat:图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)

　　3、box-shadow

　　box-shadow:h-shadow v-shadow blur spread color inset

　　h-shadow:必需值,水平阴影的位置,允许负值

　　v-shadow:必需值,垂直阴影的位置,允许负值

　　blur:可选,模糊距离

　　spread:可选,阴影的尺寸

　　color:可选,阴影的颜色

　　inset:可选,将外部阴影(outset)改为内部阴影

　　二、css3背景

　　1、background-size:

　　//css3之前背景图片的尺寸是由图片的实际尺寸决定的

　　//在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。

　　2、background-origin:

　　//规定了图片的定位区域content-box、padding-box、border-box

　　3、background-clip:

　　//规定背景的绘制区域

　　border-box:背景被裁剪到边框盒。

　　padding-box:背景被裁剪到内边距框

　　content-box:背景被裁剪到内容框

　　三、css3文本效果

　　1、text-shadow(向文本添加阴影)

　　h-shadow:必需值,水平阴影的位置,允许负值

　　v-shadow:必需值,垂直阴影的位置,允许负值

　　blur:可选,模糊距离

　　color:可选，阴影的颜色

　　2、word-wrap(允许对长的不可分割的单词进行分割并换行到下一行)

　　normal:只在允许的断点字换行

　　break-word:在长单词或URL地址内部进行换行

　　四、css3 2D转换

　　//通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸

　　1.translate(x,y)　　从当前为开始移动,移动到给定的top位置(x坐标)与left位置(y坐标)确定的位置

　　translateX(n)只沿x轴

　　translateY(n)只沿y轴

　　2.rotate(30deg)　　元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。(单位是deg)

　　//为了兼容浏览器,要加上内核

　　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 */

　　3. scale(a,b)  　　元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）高度变化的倍数

　　a表示x轴宽度变化的倍数,b表示y轴高度变化的倍数

　　scaleX(a)只变化x轴　　　　scaleY(b)只改变y轴

　　4.skew(20deg,20deg)

　　通过skew()方法 元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数

　　值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度

　　skewY()只绕x轴旋转　　　　skewY()只绕y轴

　　5.matrix()

　　　   matrix() 方法把所有 2D 转换方法组合在一起。

　　　　matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素