CSS3新属性

目录

一、 边框属性

1. border-radius属性

2. box-shadow属性

3. border-image属性

二、背景属性

三、css3渐变

1. 线性渐变（Linear Gradients）

2. 径向渐变--圆形渐变（Radial Gradients）

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

四、css3文本效果

1.单行文本溢出省略

2.多行文本溢出省略

3. CSS3 的文本阴影

4. CSS3的换行

5. CSS3 单词拆分换行

五、CSS3 2D 转换

1. 移动

2. 缩放

3. 旋转

4. 拉伸

六、CSS3 3D 转换

​​​​​​​七、CSS3 过渡

​​​​​​​八、​​​​​​​css3动画

CSS3 @keyframes 规则

---

一、 边框属性

1. border-radius属性

border-radius: 10px 20px 30px 40px;
border-radius: 10px 50px 30px;
border-radius: 10px 50px;
border-radius: 50px;
border-bottom-left-radius: 20px;

2. box-shadow属性

box-shadow: 10px 10px 5px #888888;
box-shadow: 10px 10px 5px #888888 inset; ------设置内阴影

前两个值表示阴影的偏离，第一个值是右偏移，第二个值是下偏移，第三个值是颜色过渡范围，第四个值是颜色。

3. border-image属性

border-image: url("./image/border.png") 5 5 10 10 round;
border-image-source: url("./image/border.png");
border-image-width: 78px;
border-image-slice: 12;
border-image-outset: 0;
border-image-repeat: round;

二、背景属性

height: 200px;
width: 200px;
border: 10px solid orangered;
background: url("./image/0.jpg") left top no-repeat,url("./image/border.png") right bottom repeat;
           

background-image: url("./image/0.jpg");
background-repeat: no-repeat;
background-size: contain;
background-origin:border-box;
background-clip: padding-box;

三、css3渐变

1. 线性渐变（Linear Gradients）

• - 向下/向上/向左/向右/对角方向

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

.box1{
     width: 200px;
     height: 200px;      
     background-image: linear-gradient(#e66465, #9198e5);
    }

（2）线性渐变 - 从左到右

.box1{
     width: 200px;
     height: 200px;      
     background-image: linear-gradient(to right, red , yellow);
    }

（3）线性渐变 - 对角

.box1{
     width: 200px;
     height: 200px;      
     background-image: linear-gradient(to bottom right, red, yellow);
   }

（4）带有指定的角度的线性渐变

.box1{
     width: 200px;
     height: 200px;      
     background-image: linear-gradient(-90deg, red, yellow);
    }

（5）使用透明度（transparent）

.box1{
     width: 200px;
     height: 200px;      
     background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
    }

（6）重复的线性渐变

.box1{
     width: 200px;
     height: 200px;      
     background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
    }

2. 径向渐变--圆形渐变（Radial Gradients）

• - 由它们的中心定义

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

.box1{
     width: 200px;
     height: 200px;      
     background-image: radial-gradient(red, yellow, green);
    }

• 调整光点的位置

.box1{
     width: 200px;
     height: 200px;      
     background-image: radial-gradient(at 150px 50px,red, yellow, green);
    }

（2）径向渐变 - 颜色节点不均匀分布

.box1{
     width: 200px;
     height: 200px;      
     background-image: radial-gradient(red, yellow, green);
    }

（3）形状为圆形的径向渐变

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

.box1{
     width: 200px;
     height: 200px;      
     background-image: radial-gradient(circle, red, yellow, green);
    }

（4）带有不同尺寸大小关键字的径向渐变

.box1{
     width: 200px;
     height: 200px;      
     background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
    }
.box1{
     width: 200px;
     height: 200px;      
     background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
    }

（5）重复的径向渐变

.box1{
     width: 200px;
     height: 200px;      
     background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
    }

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

size 参数定义了渐变的大小。它可以是以下四个值：

• closest-side:半径为从圆心到最近边
• closest-corner:半径为从圆心到最近角
• farthest-side:半径为从圆心到最远边
• farthest-corner:半径为从圆心到最远角

四、css3文本效果

1.单行文本溢出省略

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

2.多行文本溢出省略

display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp:3;
-webkit-box-orient: vertical;

3. CSS3 的文本阴影

• text-shadow: 5px 5px 5px #FF0000;------水平阴影，垂直阴影，模糊的距离，以及阴影的颜色

span{
   font-size: 3rem;
   display: inline-block;
   text-shadow: 2px 2px 2px #c7cfff,
   4px 4px 4px #fb73ff,
   6px 6px 6px #ffca68,
   8px 8px 8px #7e47ff,
   10px 10px 10px #FF0000;
 }
  
<span>
    我最可爱
</span>

4. CSS3的换行

• 如果某个单词太长，不适合在一个区域内，它扩展到外面：
• CSS3中，自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字：

.test {
    width:11em;
    border:1px solid #000000;
    word-wrap:break-word;
  }
 <p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>

5. CSS3 单词拆分换行

• word-break: keep-all;---------控制单词，全单词换行
• word-break: break-all;--------控制单词，截断换行

五、CSS3 2D 转换

• CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。
• 更改转化元素位置（设置转化中心，根据宽和高的比例来设置）：transform-origin: 50%;

1. 移动

• translate() 方法：默认x轴

• 三维平面里面的移动：transform: translate3d(100px,20px,0);

2. 缩放

• scale() 方法：该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数
• transform: scale(2,3);------宽增加为原来的2倍，高增加为原来的3倍。
• transform: scale(2);---------宽、高同时增加为原来的2倍。

3. 旋转

• rotate() 方法

​​​​​​​

4. 拉伸

• skew() 方法​​​​​​​

​​​​​​​

六、CSS3 3D 转换

• ​​​​​​​2D转化为3D：transform-style: preserve-3d;
• 平移：translate3d(x,y,z)-------定义3D转化
• 旋转：rotate3d(x,y,z,angle)------定义3D旋转（前面三个值   那个为0不旋转）
• 缩放：scale3d(x,y,z)----------定义3D缩放
• perspective(n）-----------定义 3D 转换元素的透视视图​​​​​​​
• perspective-origin:50px 50px;--------调整 3D 元素的底部位置​​​​​​​
• transform-origin--------------调整元素的旋转中心

​​​​​​​七、CSS3 过渡

li{
  line-height: 40px;
  text-shadow:8px 3px 2px #fff;
  /*添加过渡动画*/
  /*
  设置过渡延迟
  */
  /*transition-delay: 1s;
  /!*
  设置过渡时间
  *!/
  transition-duration: .5s;
  /!*
  设置过渡属性 如果过渡的属性比较多，其他的一样，可以写成all，也可以使用逗号连写
  *!/
  transition-property: text-shadow;
  /!*
  设置动画的方式
  *!/
  transition-timing-function: linear;*/
  transition: text-shadow .5s linear,font-size .5s ease-in;
 }
li:hover{
  text-shadow: 0 0 0 #ff8140;
  font-size: 20px;
 }

<ul>
    <li>MY</li>
    <li>YOU</li>
    <li>HOME</li>
    <li>SEA</li>
</ul>

​​​​​​​八、​​​​​​​css3动画

CSS3 @keyframes 规则

1.@keyframes mymove{
from {

}
to {

}
}

2.@keyframes mymove{
0%   {

}
100% {

}
}