【注册电子游戏平台官网】国信安教育 | 中国电科旗下高技能it教育培训机构-注册电子游戏平台

中国电科旗下高技能it教育培训机构

当前位置: 最全的电子游戏平台首页 > 公司动态 > 技术文章 > 干货|小白不能错过的20个css的高级技巧(下)

干货|小白不能错过的20个css的高级技巧(下)

2018-11-07 14:00:21


上礼拜三,

安妹给大家分享了

20个css的高级技巧(上)

今天,安妹继续来分享啦~



11. 继承 box-sizing

让 box-sizing 继承 html:

html {


  box-sizing: border-box;

}


  *, *:before, *:after {


  box-sizing: inherit;


  }


这样在插件或杠杆其他行为的其他组件中就能更容易地改变 box-sizing 了


12. 表格单元格等宽

表格工作起来很麻烦,所以务必尽量使用 table-layout: fixed 来保持单元格的等宽:


.calendar {


  table-layout: fixed;


  }

13. 用 flexbox 摆脱外边距的各种 hack

当需要用到列分隔符时,通过flexbox的 space-between 属性,你就可以摆脱nth-,first-,和 last-child 的hack了:

.list {


  display: flex;

  justify-content: space-between;

}


  .list .person {


  flex-basis: 23%;


  }


现在,列表分隔符就会在均匀间隔的位置出现。


14. 使用属性选择器用于空链接

当a元素没有文本值,但 href 属性有链接的时候显示链接:

a[href^="http"]:empty::before {


  content: attr(href);


  }


15. 检测鼠标双击

html:

  


css:


  .test3 span {

  position: relative;

}


      .test3 span a {

  position: relative;

  z-index: 2;

}

      

      .test3 span a:hover, 


      .test3 span a:active {

  z-index: 4;

}


      .test3 span input {

  background: transparent;

  border: 0;

  cursor: pointer;

  position: absolute;

  top: -1px;

  left: 0;

  width: 101%;  /* hacky */

  height: 301%; /* hacky */

  z-index: 3;

}


      .test3 span input:focus {

  background: transparent;

  border: 0;

  z-index: 1;

  }

16. css 写出三角形 

/* create an arrow that points up */


  div.arrow-up {

  width:0px;

  height:0px;

  border-left:5px solid transparent;  /* left arrow slant */

  border-right:5px solid transparent; /* right arrow slant */

  border-bottom:5px solid #2f2f2f; /* bottom, add background color here */

  font-size:0px;

  line-height:0px;

  }


 /* create an arrow that points down */


  div.arrow-down {

  width:0px;

  height:0px;

  border-left:5px solid transparent;

  border-right:5px solid transparent;

  border-top:5px solid #2f2f2f;

  font-size:0px;

  line-height:0px;

}


 /* create an arrow that points left */


  div.arrow-left {

  width:0px;

  height:0px;

  border-bottom:5px solid transparent; /* left arrow slant */

  border-top:5px solid transparent; /* right arrow slant */

  border-right:5px solid #2f2f2f; /* bottom, add background color here */

  font-size:0px;

  line-height:0px;

  }


 /* create an arrow that points right */


  div.arrow-right {

  width:0px;

  height:0px;

  border-bottom:5px solid transparent; /* left arrow slant */

  border-top:5px solid transparent; /* right arrow slant */

  border-left:5px solid #2f2f2f; /* bottom, add background color here */

  font-size:0px;

  line-height:0px;

  }


17. css3 calc() 的使用 

calc() 用法类似于函数,能够给元素设置动态的值:

      /* basic calc */


  .simpleblock {

  width: calc(100% - 100px);

  }


 /* calc in calc */


  .complexblock {

  width: calc(100% - 50% / 3);

  padding: 5px calc(3% - 2px);

  margin-left: calc(10% 10px);

  }


18. 文本渐变

文本渐变效果很流行,使用 css3 能够很简单就实现:

      h2[data-text] {

  position: relative;

}


      h2[data-text]::after {

  content: attr(data-text);

  z-index: 10;

  color: #e3e3e3;

  position: absolute;

  top: 0;

  left: 0;

-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));

  }




19. 禁用鼠标事件

css3 新增的pointer-events 让你能够禁用元素的鼠标事件,例如,一个连接如果设置了下面的样式就无法点击了

.disabled {


  pointer-events: none;


  }


20. 模糊文本

简单但很漂亮的文本模糊效果,简单又好看

.blur {


  color: transparent;

  text-shadow: 0 0 5px rgba(0,0,0,0.5);


  }




 新班预告 

国信安web前端就业班 

11月14日

火热报名中

就等你来~




相关推荐