您的位置:首页 > Web前端 > > 正文

css高级技巧图解(20个非常实用的CSS技巧)

更多 时间:2022-01-20 00:24:38 类别:Web前端 浏览量:332

css高级技巧图解

20个非常实用的CSS技巧

本文为大家分享了20个非常实用的CSS技巧,供大家参考,具体内容如下

1. 黑白图像

这段代码会让你的彩色照片显示为黑白照片,是不是很酷?

  • CSS Code复制内容到剪贴板
    1. img.desaturate {   
    2.     filter: grayscale(100%);   
    3.     -webkit-filter: grayscale(100%);   
    4.     -moz-filter: grayscale(100%);   
    5.     -ms-filter: grayscale(100%);   
    6.     -o-filter: grayscale(100%);   
    7. }   
    8.   
  • 2. 使用 :not() 在菜单上应用/取消应用边框

    先给每一个菜单项添加边框

  • CSS Code复制内容到剪贴板
    1. /* add border */  
    2. .nav li {   
    3.   border-right1px solid #666;   
    4. }   
    5. ……然后再除去最后一个元素……   
    6.   
    7. // remove border /   
    8.   
    9. .nav li:last-child {   
    10.   border-rightnone;   
    11. }   
    12. ……可以直接使用 :not() 伪类来应用元素:   
    13.   
    14. .nav li:not(:last-child) {   
    15.   border-right1px solid #666;   
    16. }   
  • 这样代码就干净,易读,易于理解了。

    当然,如果你的新元素有兄弟元素的话,也可以使用通用的兄弟选择符(~):

  • CSS Code复制内容到剪贴板
    1. ..nav li:first-child ~ li {   
    2.   
    3.   border-left1px solid #666;   
    4. }   
    5.   
  • 3. 页面顶部阴影

    下面这个简单的 css3 代码片段可以给网页加上漂亮的顶部阴影效果:

  • CSS Code复制内容到剪贴板
    1. body:before {   
    2.           content"";   
    3.           positionfixed;   
    4.           top: -10px;   
    5.           left: 0;   
    6.           width: 100%;   
    7.           height10px;   
    8.     
    9.           -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);   
    10.           -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);   
    11.           box-shadow: 0px 0px 10px rgba(0,0,0,.8);   
    12.     
    13.           z-index: 100;   
    14. }   
    15.   
  • 4. 给 body 添加行高

    你不需要分别添加 line-height 到每个p,h标记等。只要添加到 body 即可:

  • CSS Code复制内容到剪贴板
    1. body {   
    2.   line-height: 1;   
    3. }  
  • 这样文本元素就可以很容易地从 body 继承。

    5. 所有一切都垂直居中

    要将所有元素垂直居中,太简单了:

  • CSS Code复制内容到剪贴板
    1. html, body {   
    2.   height: 100%;   
    3.   margin: 0;   
    4. }   
    5.   
    6. body {   
    7.   -webkit-align-items: center;     
    8.   -ms-flex-align: center;     
    9.   align-items: center;   
    10.   display: -webkit-flex;   
    11.   display: flex;   
    12. }   
    13.   
  • 看,是不是很简单。

    注意:在IE11中要小心flexbox。

    6. 逗号分隔的列表

    让html列表项看上去像一个真正的,用逗号分隔的列表:

  • CSS Code复制内容到剪贴板
    1. ul > li:not(:last-child)::after {   
    2.   content",";   
    3. }   
    4.   
  • 对最后一个列表项使用 :not() 伪类。

    7. 使用负的 nth-child 选择项目

    在CSS中使用负的 nth-child 选择项目1到项目n。

  • CSS Code复制内容到剪贴板
    1. li {   
    2.   displaynone;   
    3. }   
    4.   
    5. /* select items 1 through 3 and display them */  
    6. li:nth-child(-n+3) {   
    7.   displayblock;   
    8. }   
    9.   
  • 8. 对图标使用 SVG

    我们没有理由不对图标使用SVG:

  • CSS Code复制内容到剪贴板
    1. .logo {   
    2.   backgroundurl("logo.svg");   
    3. }  
  • SVG对所有的分辨率类型都具有良好的扩展性,并支持所有浏览器都回归到IE9。这样可以避开.png、.jpg或.gif文件了。

    9. 优化显示文本

    有时,字体并不能在所有设备上都达到最佳的显示,所以可以让设备浏览器来帮助你:

  • XML/HTML Code复制内容到剪贴板
    1. html {   
    2.   -moz-osx-font-smoothing: grayscale;   
    3.   -webkit-font-smoothing: antialiased;   
    4.   text-rendering: optimizeLegibility;   
    5. }   
    6.   
  • 注:请负责任地使用 optimizeLegibility。此外,IE /Edge没有 text-rendering 支持。

    10. 对纯 CSS 滑块使用 max-height

    使用 max-height 和溢出隐藏来实现只有CSS的滑块:

  • CSS Code复制内容到剪贴板
    1. .slider ul {   
    2.   max-height: 0;   
    3.   overlow: hidden;   
    4. }   
    5.   
    6. .slider:hover ul {   
    7.   max-height1000px;   
    8.   transition: .3s ease;   
    9. }   
    10.   
  • 11. 继承 box-sizing

    让 box-sizing 继承 html:

  • XML/HTML Code复制内容到剪贴板
    1. html {   
    2.   box-sizing: border-box;   
    3. }   
    4.   
    5. *, *:before, *:after {   
    6.   box-sizing: inherit;   
    7. }   
    8.   
  • 这样在插件或杠杆其他行为的其他组件中就能更容易地改变 box-sizing 了。

    12. 表格单元格等宽

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

  • CSS Code复制内容到剪贴板
    1. .calendar {   
    2.   table-layoutfixed;   
    3. }   
    4.   
  • 13. 用 Flexbox 摆脱外边距的各种 hack

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

  • CSS Code复制内容到剪贴板
    1. .list {   
    2.   display: flex;   
    3.   justify-content: space-between;   
    4. }   
    5.   
    6. .list .person {   
    7.   flex-basis: 23%;   
    8. }   
    9.   
  • 现在,列表分隔符就会在均匀间隔的位置出现。

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

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

  • CSS Code复制内容到剪贴板
    1. a[href^="http"]:empty::before {   
    2.   contentattr(href);   
    3. }   
    4.   
  • 相当方便。

    15. 检测鼠标双击

    HTML:

  • XML/HTML Code复制内容到剪贴板
    1. <li class="test3">  
    2.   <span><input type="text" value=" " readonly="true" />  
    3.   <a href="http://renpingjun.com">Double click me</a></span>  
    4. </li>  
    5.   
  • CSS:

  • CSS Code复制内容到剪贴板
    1. .test3 span {   
    2.   positionrelative;   
    3. }   
    4. .test3 span a {   
    5.   positionrelative;   
    6.   z-index: 2;   
    7. }   
    8. .test3 span a:hover, .test3 span a:active {   
    9.   z-index: 4;   
    10. }   
    11. .test3 span input {   
    12.   backgroundtransparent;   
    13.   border: 0;   
    14.   cursorpointer;   
    15.   positionabsolute;   
    16.   top: -1px;   
    17.   left: 0;   
    18.   width: 101%;  /* Hacky */  
    19.   height: 301%; /* Hacky */  
    20.   z-index: 3;   
    21. }   
    22. .test3 span input:focus {   
    23.   backgroundtransparent;   
    24.   border: 0;   
    25.   z-index: 1;   
    26. }   
    27.   
  • 16. CSS 写出三角形

    利用border来写三角形代码,并且兼容IE6.

  • CSS Code复制内容到剪贴板
    1. /* create an arrow that points up */  
    2. li.arrow-up {   
    3.   width:0px;   
    4.   height:0px;   
    5.   border-left:5px solid transparent;  /* left arrow slant */  
    6.   border-right:5px solid transparent/* right arrow slant */  
    7.   border-bottom:5px solid #2f2f2f/* bottom, add background color here */  
    8.   font-size:0px;   
    9.   line-height:0px;   
    10. }   
    11.     
    12. /* create an arrow that points down */  
    13. li.arrow-down {   
    14.   width:0px;   
    15.   height:0px;   
    16.   border-left:5px solid transparent;   
    17.   border-right:5px solid transparent;   
    18.   border-top:5px solid #2f2f2f;   
    19.   font-size:0px;   
    20.   line-height:0px;   
    21. }   
    22.     
    23. /* create an arrow that points left */  
    24. li.arrow-left {   
    25.   width:0px;   
    26.   height:0px;   
    27.   border-bottom:5px solid transparent;  /* left arrow slant */  
    28.   border-top:5px solid transparent/* right arrow slant */  
    29.   border-right:5px solid #2f2f2f/* bottom, add background color here */  
    30.   font-size:0px;   
    31.   line-height:0px;   
    32. }   
    33.     
    34. /* create an arrow that points right */  
    35. li.arrow-rightright {   
    36.   width:0px;   
    37.   height:0px;   
    38.   border-bottom:5px solid transparent;  /* left arrow slant */  
    39.   border-top:5px solid transparent/* right arrow slant */  
    40.   border-left:5px solid #2f2f2f/* bottom, add background color here */  
    41.   font-size:0px;   
    42.   line-height:0px;   
    43. }   
    44.   
  • 17. CSS3 calc() 的使用

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

  • CSS Code复制内容到剪贴板
    1. /* basic calc */  
    2. .simpleBlock {   
    3.   width: calc(100% - 100px);   
    4. }   
    5.     
    6. /* calc in calc */  
    7. .complexBlock {   
    8.   width: calc(100% - 50% / 3);   
    9.   padding5px calc(3% - 2px);      margin-left: calc(10% + 10px);   
    10. }   
    11.   
  • 18. 文本渐变

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

  • CSS Code复制内容到剪贴板
    1. h2[data-text] {   
    2.   positionrelative;   
    3. }   
    4. h2[data-text]::after {   
    5.   contentattr(data-text);   
    6.   z-index: 10;   
    7.   color#e3e3e3;   
    8.   positionabsolute;   
    9.   top: 0;   
    10.   left: 0;   
    11.   -webkit-mask-image: -webkit-gradient(linear, left topleft bottombottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));}   
    12.   
  • 19. 禁用鼠标事件

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

    .disabled { pointer-events: none; }

    20. 模糊文本

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

  • CSS Code复制内容到剪贴板
    1. .blur {   
    2.    colortransparenttext-shadow: 0 0 5px rgba(0,0,0,0.5);   
    3. }   
    4.   
  • 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    标签:css 技巧
    您可能感兴趣