css高级篇学习one

一、图片边框与背景高级

• border-image（简写属性），简写的属性如下：

1. border-image-source	图片的来源url
   border-image-width	图片边框的宽度
   border-image-slice	用井字切割法，从四个角切割的宽度
   border-image-repeat	设置边框图像重复的方式
   border-image-outset	规定边框图像超出盒模型的宽度

2.       关于井字切割，被用作边框的图像会被分为九部分，中间的会留空，用作内容区域，四个角就是边框的四个角，只有上中，左中，右中，下中，这四部分图像会受border-image-repeat的影响。
3. 如下图像为例：

        当该图像被用作边框，设置切割四角为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）
background-clip	规定背景图像裁剪的区域 （border-box，padding-box，content-box）
background-origin	指定图像相对于谁定位 （border-box,padding-box,content-box）
background-image	初级中学到的属性，这里拓展，可以用来指定多重图像，用逗号隔开。

   2.     背景图像大小之contain和cover解析：contain的背景图像会尽量扩大，但是不会超出元素，会留白；cover的背景图像会超出元素，铺满整个屏幕，不会留白。

   3.自此我们一共学习了背景的属性共8个，分别是：background-color,background-position,background-size,background-repeat,background-origin,background-clip,background-attachment,background-image。

  4.下面是自己尝试的效果：

<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. 线性渐变：image-image:linear-gradient(to bottom right,red,yellow)；规定三个值，分别是变化方向，变化的起止颜色。
3. 实例如下

4. <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() 占比);

5. 如下：

6. 改变上面background-image中的内容，进行拓展练习。

7. background-image: repeating-linear-gradient(to bottom right,rgba(255,0,0,0.2) 1%,yellow 10%);/* 指定背景的线性渐变,用了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	开始的颜色，结束的颜色，可以使用多个，每个颜色后面都可以跟%值，来规定颜色占总背景的多少，可用于重复的径向渐变

3. 径向重复渐变：background-image: repeating-radial-gradient(shape ,color1 x%,color2 x2%);
4. 例子：

   <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;

1. 解释：前三个像素值分别代表横向阴影，纵向阴影，阴影模糊程度，阴影的颜色；可以同时指定多个阴影值，用逗号隔开即可。
2. 当指定多个阴影值的时候，在前面的阴影值最靠里面，而后向外，但实际效果多表现为颜色的混合，具体还要根据总阴影面积大小而定，总阴影面积小于多阴影面积之和就会发生颜色混合（个人实验和理解）

• 元素阴影的使用：box-shadow: px px px color;  可以使用rgba值来设置颜色和透明度，也可以用第三个px值表示。

1. 解释：跟文字非常相似，第一个值是横向阴影，第二个值是纵向阴影，第三个值是模糊程度，第四个值是颜色。
2. 可以使用元素阴影实现卡片效果具体例子如下：

<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转换

• 2D转换要用到的属性只有一个，即transform，该属性有五个类型的函数式值：

rotate(deg)	元素顺时针或逆时针旋转指定度数，正负指定顺逆
scale(x,y)	元素放大或缩小的倍数。 x是宽放大或缩小的倍数，y是高放大或缩小的倍数。
skew(xdeg,ydeg)	元素沿着x轴或者y轴倾斜指定度数。
translate(x,y)	元素在原来的位置基础上移动指定距离
xxxxX()    xxxxY()	上面的几种情况，都有这样两个具体的函数，用来指定具体的某个值，如：skewY（deg）就是规定元素沿着y轴倾斜的度数。根据具体情况，有些带上x和y就不是2D转换了，例如rotateX和rotateY就是3D转换。
matrix(scaleX(),skewY(), skewX(),scaleY(), translateX(),translateY())	这个函数允许同时进行上面的多种转换，不用这个函数，尝试过用逗号隔开，没用。 transform: matrix(1, -0.3, 0, 1, 0, 0); 追加，在学到过渡时，发现在transform中可以同时指定多个过渡，但是不用逗号隔开

• 这里以旋转效果为例：

在上面铃芽的实验中，加入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)的问题，相关的有两个属性（perspective和perspective-origin),他们分别定义视距和视距的基点。

1. 所谓视距就是观察者（用户）离元素基点的距离，默认视距是很远的至少在1500以上；视距基点就是，观察者直视的点。下面掩饰二者区别；

<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>

         该效果是啥都看不见，对没错，你没看错，我们把视距改成150，试试。

 虽然是旋转了九十度，但是我们还是看到了，因为视距不一样，就像你把拿着一个纸板，当时距为零，且视距的基点在纸板中心，即使其旋转了90度，你视距为0，是不是一抬眼就看到了好大一片，但是看不到全貌，一但将这个旋转后的纸板放在你十米开外，跟你视线齐平，你就看到的仅是一条线。

现在我们再调整视距基点试试。

<style>
body{
 perspective: 150px;
 perspective-origin: 10% 50%;
  /* 关注点，调整视距基点的属性，
  第一个值越大基点越靠右，
  第二个值越大越靠下，
  默认是中点。 */ 
}
</style>

因为我们刚才看到，150视距时，感觉还时再该元素的右边看，所以body的中心点肯定在元素的右边，所以我们改变视距基点，让基点靠左一点。

 是不是有种把纸板放在下巴下面看的感觉，理解了吧，嘿嘿！

• 3D转换相关属性

transform	具体转换需要的属性，可使用函数进行具体转换
transform-origin	可以改变被转换元素的基点位置
perspective	指定视距，直接用数字或者加上px
perspective-origin: x% y%	设置视距的基点位置， 第一个百分比是左右移动，占比越大越靠右， 第二个越大越靠下。
backface-visibility	规定当元素背对着时是否可见，两个值hidden｜visible
transform-style	规定当父元素转换时，是否保留子元素的3D效果。 两个值：flat｜preserve-3d   不保留，保留。

• 关于safari的兼容问题，我看的教程中，说要加上-webkit-前缀，perspective还是需要加的，但是backface-visibility这个属性不用加，应该是浏览器更新后，开始支持了，更加方便了。

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

（一）过渡效果

• 过渡效果包括的属性有：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>