Css3新特性应用之视觉效果实例

时间:2017-04-09

代码如下:

.wrap{
        background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, .4) 0) no-repeat 100% 0/2em 2em,
        linear-gradient(-135deg, transparent 1.4em, #58a 0);
        width: 200px;
        height: 120px;
    }

注意

1、100% 0/2em 2em在定位背景元素的位置与宽高,尤其是2em的宽与高都是背景元素正常的宽度。

2、而第二个linear-gradient中的1.4em是沿着渐变轴进行度量的,也就是渐变轴到元素顶边的距离,本例是渐变轴到右上边顶的距离

3、to left bottom是表示渐变从左下角开始

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

  • 共2页:
  • 上一页
  • 2/2下一篇
    上一篇:使用CSS3 制作一个material-design 风格登录界面实例 下一篇:CSS布局奇淫技巧之--各种居中总结

    相关文章

    最新文章