HTML5 学习笔记

1   这种效果

Border设置 顶部为有颜色  其他为透明  宽度为0

 三角的大小取决于border-weight

2 鼠标经过图片放大效果

  

 令之前为1:1 比例

之后为1:2放大 

 

 

3 园 的效果~ 

 

 

 

4  transition-timing-function 属性

   

 

 

5  呈现这种效果

              

 

代码~ 重要的是 

1   box-sizing：border-box； 如果不加的话会出现一直闪的现象；

2   transition：加上之后 才会有效果；

3   border：之所以出现双线我觉得是因为 double  是双线的意思 

 

 

6渐变效果 

  background : linear-gradient(rgba(220,220,255,0.4) 85%, rgba(255,255,255,0.5) 100%);

 

7 计数器counter-increment:demo  counter-reset:demo  配合使用

.main {width:80%; margin:10px auto; counter-reset:demo;} // 父级元素

.main a {counter-increment:demo;}

 

 可以记录所写的样式中有几个  

demo 是给他起的名字~

     用的时候 main a:before {content:counter(demo, decimal);} 

 

 

8  让链接网址显示的时候

“”

 

8  border的  属性

 

 

  效果