Web前端学习——CSS3属性

CSS3

一.border 属性

1. CSS3 盒阴影

CSS3 中的 box-shadow 属性被用来添加阴影

代码如下：

<style>
.box {
            width: 100px;
            height: 100px;
            /*控制盒子阴影*/
            box-shadow: 10px 10px 5px #888888;
        }
</style>

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

h-shadow 第一个值是水平阴影的位置 （px）
v-shadow 第二个值是锤直阴影的位置（px）
blur 第三个值是阴影模糊距离（px）
color 第四个值是阴影的颜色
inset 从外层的阴影（开始时）改变阴影内侧阴影

2. CSS3 圆角

border-radius 属性被用于创建圆角

代码如下：

<style>
 .box {
            width: 100px;
            height: 100px;
            background-color: red;
             /*控制盒子圆角*/
            border-radius: 10px;
        }
</style>

border-radius: 10px;
四个圆角为10px

border-radius: 10px 20px;
上左和下右边圆角为10px 上右下左边圆角为20px

border-radius: 10px 20px 30px;
上左圆角为10px 下右圆角为30px 上右下左圆角为20px

border-radius: 10px 20px 30px 40px;
上左圆角为10px 上右圆角为20px 下右圆角为30px 下左圆角为40px

border-bottom-left-radius: 20px;
左下圆角为20px

3. CSS3 边界图片

指定作为div元素周围边框的图像

代码如下：

<style>
.box2 {
            width: 100px;
            height: 100px;
            border: 30px solid #fff;
            border-image: url("./img/border.png") 30 30 round;
        }
</style>

border-image: source slice outset repeat;

border-image-source
用于指定要用于绘制边框的图像的位置

border-image-slice
图像边界向内偏移

border-image-outset
用于指定在边框外部绘制 border-image-area 的量

border-image-repeat:repeat | stretch | round
用于设置图像边界是否应重复、拉伸或铺满。

二. CSS3 渐变

1.CSS3 中使用角度

角度是指水平线和渐变线之间的角度，逆时针方向计算。

2.线性渐变（Linear Gradients）

background-image: linear-gradient(to direction, color-stop1, color-stop2, ...);

颜色color-stop1渐变到颜色color-stop2在direction方位终止

2.1 线性渐变 - 从上到下（默认情况下）

background-image: linear-gradient(#fff, #000);

/*从上到下*/
background-image: linear-gradient(to bottom,#fff, #000);

2.2 线性渐变 - 从左到右

/*从右到左*/
background-image: linear-gradient(to left, #fff, #000);

2.3 线性渐变 - 对角

/*从右上到左下*/
background-image: linear-gradient(to left bottom, #fff, #000);

2.4 线性渐变的其他使用

a.重复的线性渐变

background-image: repeating-linear-gradient(red, #fff 20%);

b.使用多个颜色节点

background-image: linear-gradient(red, #fff, #000);

3.径向渐变（Radial Gradients）- 由它们的中心定义

3.1 径向渐变 - 颜色节点均匀分布（默认情况下）

background-image: radial-gradient( #fff, #000);

3.2 径向渐变 - 颜色节点不均匀分布

background-image: radial-gradient(#fff 30%, #000 50%);

3.3不同尺寸大小关键字的使用

closest-side:半径为从圆心到最近边

background-image: radial-gradient(closest-side at 50% 60%, #fff, #000);

closest-corner:半径为从圆心到最近角

background-image: radial-gradient(closest-corner at 50% 60%, #fff, #000);

farthest-side:半径为从圆心到最远边

background-image: radial-gradient(farthest-side at 50% 60%, #fff, #000);

farthest-corner:半径为从圆心到最远角

background-image: radial-gradient(farthest-corner at 50% 60%, #fff, #000);

三. CSS3 文本效果

1.字体阴影

/*水平阴影 垂直阴影 模糊距离 阴影颜色*/
text-shadow: 5px 5px 2px #FF0000;

`

2.Overflow属性

2.1单行溢出省略

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

2.2多行行溢出省略

display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;		/*控制行数，在第三行进行隐藏*/
-webkit-box-orient: vertical;

三. CSS3的换行

word-wrap：normal | break-word

CSS3中，自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字

normal 只在允许的断字点换行
break-word 在长单词或 URL 地址内部进行换行。

四. CSS3 单词拆分换行

单词不拆分换行

word-break: keep-all;

单词拆分换行

word-break: break-all;

五. CSS3 2d 3d转化

1. translate( ) 平移

根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

/*向X轴正方向（向右）移动50px在向Y轴正方向向下移动100px*/
transform: translate(50px,100px);
translate() 						/*默认x*/
translatex(100px)					/*x轴*/
translatey(100px)					/*y轴*/
translatez(100px)					/*z轴*/

2. rotate( ) 旋转

在一个给定度数顺时针旋转的元素(负值是允许的,逆时针旋转)

/*rotate值（30deg）元素顺时针旋转30度。*/

transform: rotate(30deg);   /*默认z轴*/
transform: rotatex(30deg);	/*默认x轴*/
transform: rotatey(30deg);	/*默认y轴*/
transform: rotatez(30deg);	/*默认z轴*/

3. scale( ) 缩放

一定比例放大缩小当前元素

/*缩放为原来的一倍*/
scale(1)

/*宽缩放为原来的一倍，高缩放为原来的二倍*/
scale(1,2) 

4. skew( ) 拉伸

控制X轴和Y轴倾斜的角度

skew(45deg,10deg)	/*x轴倾斜45度y轴倾斜10度*/
skewx(45deg)		/*x轴倾斜45度*/
skewy(45deg)		/*y轴倾斜45度*/

5. 3d效果

5.1 2d转化3d

transform-style:preserve-3d;

5.2 3d中的属性设置

/*x轴 y轴 z轴的变化*/
transform: translate3d(100px,20px,0);
transform: rotate3d(1,1,1,180deg);			/*值为1旋转 值为0旋转*/
transform: scale3d(.5,.5,.5);

六. CSS3 过渡

1.过度属性

a.设置过渡延迟

 transition-delay: 1s;

b.设置过渡的时间

transition-duration: .5s;

c.设置过渡属性

transition-property: text-shadow;

/* 如果过渡的属性比较多  其他的一样 可以写成all  也可以使用逗号连写*/
transition-property: text-shadow,div;

d.设置动画的方式

transition-timing-function:linear;

linear 规定以相同速度开始至结束的过渡效果
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in 规定以慢速开始的过渡效果
ease-out 规定以慢速结束的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果

e.复合写法

/*属性名 过渡时间 延迟时间 过度方式*/

transition：all 0.5s 0.5s linear;

七. CSS3 动画

1.动画播放器

两种写法(animte_1是动画播放器名称)：

@keyframes animte_1 {
				from{

    				}
				to  {

    				}
    			}

 @keyframes animte_1 {
				0%{

    				}
				100%{

    				}
    			}

2.CSS3 动画

2.1动画执行的次数 number infinite

animation-iteration-count: 2;

2.2播放方式

animation-direction:alternate;

normal
默认值。动画按正常播放

reverse
动画反向播放。

alternate
动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。

alternate-reverse
动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。

2.3动画的延迟

/*动画延迟1s后开始播放*/

animation-delay: 1s;

2.4动画时间

/*动画在5s内完成*/

animation-duration: 5s;

2.5播放完成的位置

animation-fill-mode: forwards;

none
默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。

forwards
在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。

backwards
动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 “normal” 或 “alternate” 时）或 to 关键帧中的值（当 animation-direction 为 “reverse” 或 “alternate-reverse” 时）。

both
动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。

2.6动画名称

/*animte_1是动画的名称*/

animation-name: animte_1;

2.7动画的状态

animation-play-state: paused;

paused
指定暂停动画

running
指定正在运行的动画

2.8动画的运动方式

animation-timing-function: linear;

linear 规定以相同速度开始至结束的过渡效果
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in 规定以慢速开始的过渡效果
ease-out 规定以慢速结束的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果