一文掌握CSS高级特性：边框、背景到3D动画

一文掌握CSS高级特性：边框、背景到3D动画

一、图片边框与背景高级

border-image属性

border-image是一个简写属性，用于设置元素的边框图像。它包含以下几个子属性：

1. border-image-source：指定边框图像的URL
2. border-image-width：设置边框图像的宽度
3. border-image-slice：使用井字切割法，从四个角切割的宽度
4. border-image-repeat：设置边框图像重复的方式
5. border-image-outset：规定边框图像超出盒模型的宽度

井字切割法

被用作边框的图像会被分为九部分，中间的部分会留空，用作内容区域，四个角就是边框的四个角，只有上中、左中、右中、下中这四部分图像会受border-image-repeat的影响。

示例

当该图像被用作边框，设置切割四角为30%，然后图像重复设置为拉伸，效果如下：

<style>
#box1{
 font-size: 32px;
 text-align: center;
 padding: 10px;
 border: 10px solid red;
 border-image: url("../imgs/border.png") 30% stretch;
}
</style>

背景高级属性

需要使用四个新的背景属性：

1. background-size：指定背景图像的大小（px，百分比，contain，cover）
2. background-clip：规定背景图像裁剪的区域（border-box，padding-box，content-box）
3. background-origin：指定图像相对于谁定位（border-box,padding-box,content-box）
4. background-image：可以用来指定多重图像，用逗号隔开

contain和cover的区别

• contain：背景图像会尽量扩大，但是不会超出元素，会留白
• cover：背景图像会超出元素，铺满整个屏幕，不会留白

实例

<style>
#box1{
 font-size: 32px;
 text-align: center;
 padding: 10px;
 border: 10px solid red;
 border-image: url("../imgs/border.png") 30% stretch;
 background-image: url("../imgs/lingya.jpg");
 background-size: contain;
 background-clip: content-box;
}
</style>

背景颜色的线性渐变

1. 渐变分为：线性渐变（五个方向：向上，下，左，右和对角线）和径向渐变（由中心向四周）
2. 线性渐变语法：background-image:linear-gradient(to bottom right,red,yellow)；需要指定三个值，分别是变化方向，变化的起止颜色。

示例

<style>
#box2{
  width: 200px;
  height: 400px;
  margin: 0 auto;
  padding: 50px;
  border: 2px solid black; /* 上面是为了好看做的，与本节无关 */
  background-image: linear-gradient(to bottom right,red,yellow);/* 指定背景的线性渐变 */
  background-clip: content-box;/* 规定背景覆盖区域大小 */
}
</style>

线性渐变也可以设置重复，使用background-image:repeating-linear-gradient(方向，begincolor 占比，endcolor 占比），同时其也支持透明度的设置。background-image: repeating-linear-gradient(方向，rgba() 占比, rgba() 占比);

径向渐变

1. 语法： background-image: radial-gradient(shape at position,startcolor,endcolor);
2. 具体可能值：

• shape：circle(圆形)、ellipse(椭圆)
• position：px1 px2、x1% x2%、x% 两个值用来给四种size类型定位closest-side、farthest-side、closest-corner、farthest-corner第二个值不填默认为50%
• startcolor、endcolor：开始的颜色，结束的颜色，可以使用多个，每个颜色后面都可以跟%值，来规定颜色占总背景的多少，可用于重复的径向渐变

径向重复渐变

语法：background-image: repeating-radial-gradient(shape ,color1 x%,color2 x2%);

示例

<style>
#gradientest{
  width:200px;
  height: 300px;
  float: left;
  background-image: radial-gradient(circle, red, yellow,blue);
}
#gradientest2{
  width:200px;
  height: 300px;
  float: left;
  background-image: radial-gradient(farthest-corner at 50% 80%, red, yellow,blue);/* 测试size用法 */
}
#gradientest4{
  width:200px;
  height: 300px;
  float: left; 
  background-image: repeating-radial-gradient(circle,red , yellow 10% , blue 10%);
/* 测试重复径向渐变,下面蓝色之所以看不到是因为百分比跟前面的一样，调成15%就可以看到蓝色了*/
}
</style>

二、文本和元素的阴影效果

文本阴影

语法：text-shadow: px px px color;

• 前三个像素值分别代表横向阴影，纵向阴影，阴影模糊程度，阴影的颜色
• 可以同时指定多个阴影值，用逗号隔开

元素阴影

语法：box-shadow: px px px color;

• 跟文字非常相似，第一个值是横向阴影，第二个值是纵向阴影，第三个值是模糊程度，第四个值是颜色
• 可以使用rgba值来设置颜色和透明度

卡片效果示例

<style>
div.he{
  text-align: center;
  width: 30%;
  box-shadow: 3px 3px 8px  rgba(0,0,0,0.6);
  /*给盒子添加阴影效果，使盒子看起来更像卡片*/
}
.header{
  display: block; 
  /* 因为img本身不是块元素，但是作为元素又天生具有内外边距大概2px，
  所以需要设置显示方式，然后去除内外边距 ，使卡片中的元素更紧凑*/
  width: 100%;
  margin: 0px;
  float: float;
  padding: 0px;
  background-color: green;
}
div.endbot{
   text-align: center;
   margin: 0px;
   background-color: green;
   width: 100%;
}
div.endbot p{
  display: block;/* 道理跟图片一样 */
  margin: 0px;
}
</style>
<div class="he">
        <img class="header" alt="lingyazhilv" src="../imgs/lingya.jpg" style="width:100%">
        <div class="endbot">
         <p>我最爱的作品<br>《铃芽之旅》</p>
        </div>
    </div>

其他文本属性

• text-overflow：ellipsis|clip|string 三个值分别对应不同的文本超出元素的处理方式分别是：以省略号代替，直接剪切，用自己定义的符号替代。
• word-break：normal|break-all|keep-all 规定文字的换行规则，让浏览器决定｜允许在一个单词中换行｜保持每个单词的完整性
• word-wrap：normal|break-word 规定文本是否允许单词被拆分换行，跟上面功能重复
• writing-mode：horizontal-tb|vertical-rl|vertical-lr 规定文字的排版方向。水平自左向右，自上而下垂直排列，文字自上而下，从右向左，垂直排列，文字自上而下，从左向右。

三、2D转换

transform属性

transform属性有五个类型的函数式值：

1. rotate(deg)：元素顺时针或逆时针旋转指定度数，正负指定顺逆
2. scale(x,y)：元素放大或缩小的倍数。x是宽放大或缩小的倍数，y是高放大或缩小的倍数。
3. skew(xdeg,ydeg)：元素沿着x轴或者y轴倾斜指定度数。
4. translate(x,y)：元素在原来的位置基础上移动指定距离
5. matrix()：允许同时进行多种转换

示例

在上面铃芽的实验中，加入transform，方便实验。

<style>
div.he{
   margin: 10px;
  text-align: center;
  width: 30%;
  box-shadow: 3px 3px 8px  rgba(0,0,0,0.6);
  transform: rotate(45deg); /* 2D转换实验 */
  /*给盒子添加阴影效果，使盒子看起来更像卡片*/
}
</style>

四、3D转换

视距相关属性

• perspective：指定视距，直接用数字或者加上px
• perspective-origin：设置视距的基点位置，第一个百分比是左右移动，占比越大越靠右，第二个越大越靠下。

示例

<style>
div.he{
   margin: 10px;
  text-align: center;
  width: 30%;
  box-shadow: 3px 3px 8px  rgba(0,0,0,0.6);
  transform: rotateX(90deg); /* 我们让元素沿x轴旋转90度，这时候我们应该只能看到一条线 */  
}
body{/*注意元素的视距应该加在转换元素的先辈元素上，不然不起效*/
perspective: 1500;/*换成0对比实验*/
  -webkit-perspective: 1500;  /* 视距实验关注数据 ，兼容chrome和safari浏览器*/
}
</style>

3D转换相关属性

• transform：具体转换需要的属性，可使用函数进行具体转换
• transform-origin：可以改变被转换元素的基点位置
• backface-visibility：规定当元素背对着时是否可见，两个值hidden｜visible
• transform-style：规定当父元素转换时，是否保留子元素的3D效果。两个值：flat｜preserve-3d

五、过渡效果和动画、简单提示文本工具制作

过渡效果

过渡效果包括的属性有：transition transition-property transition-delay transition-duration transition-timing-delay。分别作用：简写属性 指定过渡效果的属性 过渡效果延时发生的时间 过渡效果持续的时间 过度效果的时间曲线。

对应的属性值如下：

• transition：下面四种属性的简写属性property duration time-function delay
• transition-delay：time
• transition-duration：time
• transition-property：要变换的属性名
• transition-timing-function：见下表

transition-timing-function的具体的值：

• linear：线性匀速地过渡
• ease：慢速开始，然后加速，最后慢速结束
• ease-in：慢速开始
• ease-out：慢速结束
• ease-in-out：慢速开始，慢速结束
• cubic-bezier(n,n,n,n)：贝塞尔曲线指定

示例

将上面的卡片，实现鼠标放上去，反转加移动

<style>
div.he{
  margin:0 auto 0 0;
  text-align: center;
  width: 30%;
  box-shadow: 3px 3px 8px  rgba(0,0,0,0.6);
  backface-visibility: visible; /* 指定元素背对仍可见  */
}
div.he:hover{
  transform: rotateX(180deg) translate(800px, 10px); /* 过渡效果，旋转加移动 */
  transition: transform 2s linear 0s;
}
</style>

移动和翻转过程的截图

动画

动画比过渡更加灵活，能处理更加复杂的动态效果，要理解动画效果就要首先明白@keyframes 这个概念，其用来指定动画的名称和具体细节

<style>
div.he{
  margin:0 auto 0 0;
  text-align: center;
  width: 30%;
  box-shadow: 3px 3px 8px  rgba(0,0,0,0.6);
  position: relative;
/*开启定位，因为margin等边距属性不支持过渡和动画，所以要实现动画必须开启定位*/
  backface-visibility: visible; /* 指定元素背对仍可见  */
  animation-name: myanimation; /* 将动画绑定到元素，通过动画名字 */
  animation-duration: 3s;  /* 规定动画进行用时，关键，若不指定则动画不会发生 */
  animation-direction: alternate; /* 规定动画正着放完倒着放，更加丝滑 */
  animation-iteration-count: infinite; /* 指定动画运行的次数，这里无限运行 */
  
}
/* 指定动画     动画的名字 */
@keyframes myanimation{
   from{left:0px;}
   to{left:800px;}/* 在指定动画效果时，无论如何前面出现的属性，后面一定要出现，体现变化 */
}
</style>

效果是图片一致来回移动，永不停止，不再截图没有意义，图看不见动效。

动画的属性

• @keyframes：string 指定动画名称和动画具体内容
• animation-name：string 在元素中指定的动画名字，要与@keyframes的名字一致，绑定。
• animation-duration：time 指定动画用时，若不指定则动画效果没有
• animation-iteration-count：number infinite 指定动画运行的次数，infinite意为永动，一直重复执行
• animation-direction：normal alternate 指定动画运行的方向，普通正向运动，还是正反反复运行。
• animation-delay：time 指定动画运行的延时进行，若为负值则动画就会被视为已经执行了几秒钟。
• animation-timing-function：ease ease-in ease-out ease-in-out cubic-bezier(n,n,n,n) 指定动画运行的时间函数，值的意思跟上面过渡同名属性的值意思一致。
• animation-fill-mode：normal forwards backwards both 规定动画不运行时，元素的状态（是否被动画影响）不影响在动画运行之后保持关键帧中的最后一帧在动画运行之前或之后返回动画运行之前元素的状态两者都运用。
• animation-play-state：pause running 规定动画是否运行，暂停，运行，可能要结合js使用，否则感觉很多余耶。
• animation：顺序 name duration timing-function delay iteration-count direction 简写属性，顺序见左边。

简单工具文本提示制作

<style>
.tooltip{
 position: relitive;
 width: 10%;
}
.tooltiptext{
 display: none;
 color: white;
 background-color: green;
 padding: 2px;
 text-align: center;
 position: absolute;
}
.tooltip:hover + .tooltiptext{
  display: inline-block;
  
}
</style>
<button class="tooltip">按钮</button>
    <span class="tooltiptext">这是工具提示文本</span>