CSS3笔记!

2D/3D转换

围绕三个轴,分别为X轴,Y轴,Z轴;

transfrom(属性)

    转换

常用元素translate     rotate     skew

          平移    旋转   倾斜

translate(50px,100px):从左像移50像素,并从顶部移动100像素。

rotate(30deg):元素顺时针旋转30度。

scale():该元素增加或减少的大小,取决于宽(X轴)和高(Y轴)的参数。

例:scale(2,4)转变为原来大小宽的2倍,和其原大小4倍的高度。X轴(水平方向)y轴垂直方向。

skew(30deg,200deg):元素在X轴和Y轴上倾斜20度30度。

matrix():有6个参数,包含旋转,缩放,移动,倾斜。

CSS图片

img { border-radius: 8px; } 圆角图片;

img {border-radius:50%} 椭圆形图片;

column-count:将元素列数分为;

column-gap:40px;列于列之间相差40像素

column-rule:3px outset #ffooff;指定列之间的宽样式和颜色;

阴影

text-shadow:文本阴影   例:text-shadow:5px  5px  5px #fff; 给标题加白色阴影。

box-shadow:盒子阴影   例:box-shadow:10px 10px; 给盒子10p的x阴影。

div{box-shadow:10px 10px grey;} 给阴影添加颜色;

P{word-wrap:break-word} 允许长文本换行。

posted @ 2018-12-24 19:41  一只无名程序猿  阅读(117)  评论(0编辑  收藏  举报