【凯发旗舰官网】国信安教育 | 中国电科旗下高技能it教育培训机构-凯发旗舰

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

　　}