原码笔记

原码笔记

CSS3样式linear-gradient的使用实例

小诸哥 0

linear-gradient

1.linear-gradient是CSS3中新增的样式，主要用于颜色的渐变效果。

2.linear-gradient在不同内核下使用方式不同。

实用栗子（在Chrome下）

1.缺角效果

 先看效果图

  1. <div class="div1">
  2.      这是内容
  3. </div>
  1. .div1 {
  2.          width: 100px;
  3.          height: 40px;
  4.          line-height: 40px;
  5.          background:linear-gradient(-135deg, transparent 15px, #162e48 0);
  6.          color: #fff;
  7.          padding: 5px 15px;
  8.          text-align: center;
  9.          margin-bottom: 30px;
  10.      }

2.补角效果

先看效果图

 

  1. .div2 {
  2.          width: 100px;
  3.          height: 40px;
  4.          line-height: 40px;
  5.          background:linear-gradient(-135deg, #f00 15px, #162e48 0);
  6.          color: #fff;
  7.          padding: 5px 15px;
  8.          text-align: center;
  9.          margin-bottom: 30px;
  10.      }

只是在栗子1的基础上修改了linear-gradient，将transparent修改为#f00

3.带边框的效果

先看效果图

  1. <div class="div3">
  2.      这是内容
  3. </div>
  1. .div3 {
  2.          width: 100px;
  3.          height: 40px;
  4.          line-height: 40px;
  5.          background:linear-gradient(-135deg, #f00 15px, #162e48 0);
  6.          color: #fff;
  7.          padding: 5px 15px;
  8.          text-align: center;
  9.          margin-bottom: 30px;
  10.          box-shadow: 0 0 1px 1px #fff inset;
  11.      }

在栗子2的基础上增加了box-shadow，当然加边框可以有多种方式，可自行选择。

4.开关效果

效果图

  1. <div class="div4">
  2.      <div class="div4-1">OFF</div>
  3.      <div class="div4-2 active">ON</div>
  4. </div>
  1. .div4 {
  2.          width: 144px;
  3.          height: 30px;
  4.          line-height: 30px;
  5.          background: #162e48;
  6.          color: #FFF;
  7.          text-align: center;
  8.          margin-bottom: 30px;
  9.      }
  10.      .div4-1, .div4-2 {
  11.          width: 86px;
  12.          float: left;
  13.      }
  14.      .div4-1.active {
  15.          margin-right: -28px;
  16.          background:linear-gradient(-135deg, transparent 20px, #f00 0);
  17.      }
  18.      .div4-2.active {
  19.          margin-left: -28px;
  20.          background:linear-gradient(45deg, transparent 20px, #f00 0);
  21.      }

最终效果可根据需要自行调整

5.在栗子3的基础上做到以下效果，单纯使用linear-gradient没有找到解决方法，如有方案，请在评论下给出方案。以下是其中一种解决方式

效果图

  1. .div5 {
  2.          width: 100px;
  3.          height: 40px;
  4.          line-height: 40px;
  5.          background:linear-gradient(-135deg, #fff 15px, #162e48 0);
  6.          color: #fff;
  7.          padding: 5px 15px;
  8.          text-align: center;
  9.          box-shadow: 0 0 1px 1px #fff;
  10.          margin-bottom: 30px;
  11.          position: relative;
  12.      }
  13.      .div5:after {
  14.          content: ' ';
  15.          border: solid transparent;
  16.          position: absolute;
  17.          border-width: 12px;
  18.          border-top-color: #000;
  19.          border-right-color: #000;
  20.          top: -2px;
  21.          right: -2px;
  22.      }
  23.  

6.考虑到兼容性问题，可以通过:before和:after实现同样的效果，给出一个栗子

  1. .div6 {
  2.          width: 100px;
  3.          height: 40px;
  4.          line-height: 40px;
  5.          background:#162e48;
  6.          color: #fff;
  7.          padding: 5px 15px;
  8.          text-align: center;
  9.          position: relative;
  10.          border: 1px solid #fff;
  11.          margin-bottom: 30px;
  12.      }
  13.      .div6:before {
  14.          content: ' ';
  15.          border: solid transparent;
  16.          position: absolute;
  17.          border-width: 15px;
  18.          border-top-color: #fff;
  19.          border-right-color: #fff;
  20.          right: 0px;
  21.          top: 0px;
  22.      }
  23.      .div6:after {
  24.          content: ' ';
  25.          border: solid transparent;
  26.          position: absolute;
  27.          border-width: 15px;
  28.          border-top-color: #000;
  29.          border-right-color: #000;
  30.          top: -1px;
  31.          right: -1px;
  32.      }
  33.  

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

标签： CSS 使用 实例

赏
版权声明：本站所有图片/内容除标明原创外，均来自网络转载，版权归原作者所有，如果有侵犯到您的权益，请联系本站删除，谢谢！

上一篇前端兼容性问题总结(PC端)

下一篇使用CSS3 font-feature-settings特性减除字体动画震颤效果

相关文章