css属性

属性

1.边框（border:5px solid red;）

Border-radius----圆角边框（要先设置边框才能设置圆角边框）

Border-radius{20px}

Border-left-color:red;可以改变边框左边的颜色，同理上下左右。

Border-left-color:transparent;  transparent表示透明。

Box-shadow----边框阴影

如：box-shadow:10px  30px  20px  blue;第一个值表示水平方向，第二个值表示垂直方向，第三个值表示阴影的模糊程度，第四个值表示颜色，再添加一个inset阴影就回会显示在内侧。

Border-image----边框图片

Border.image:uil(图片位置)；300px 300px round/stretch;   px表示截取图片的长宽，round表示让图片重复显示避免拉伸，stretch表示让图片拉伸显示。

2.背景（background）

Background-size：背景大小

首先插入一张background-image:url(img/1b4c510fd9f9d72ad17dbb82d42a2834349bbb10.jpg) ;

背景图片，然后才可执行以下操作。

如：Background-size：400px 400px;   （水平尺寸，垂直尺寸）

                   60% 80%

                   Cover         （等比例缩放显示，填满）

                   Contain       （同上，但是不填满）

Background-origin:定位图片位置

background-origin: padding-box|border-box|content-box;

Background-clip:同上属性

Box-sizing:同上属性（盒子尺寸）

注：加浏览器前缀便于识别：谷歌 -w ebkit-

                          火狐 -moz-

                          IE    -MS-

                          欧朋  -o-

 

文本效果：

文本阴影：如：text-shadow：40px 40px red；

换行 ：word-wrap：break-word；

省略： text-overflow:

 

 

2D转换：

属性：translate(x,y);  元素从其当前位置移动，根据给定的left（x坐标）和 top

                  （ y 坐标）位置参数

 

如：transform: translate(50px,100px);

      Rotato(deg); 元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

如：transform: rotate(30deg);

      Scale(x,y); 元素的尺寸会增加或减少，根据给定的宽度（X轴）和高度（Y

               轴 ）参数

 

如：transform: scale(2,4);

      Skew(deg,deg) ；翻转，根据给定的水平线（X轴）和垂直线（Y轴）参

                     数

如：transform: skew(30deg,20deg);

 

3D转换：

必须先给元素设置一个转换类型：{transform-style：preserve-3D；}

属性：translate3d（x，y，z）    沿着x,y,z轴移动

      Rotate3d（x，y，z，deg） 复制

      Perspective（n）         定义3D 转换元素的透视视图