• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > HTML5与CSS3.0 > CSS3常规使用(6): CSS的渐变与图片边框

    CSS3常规使用(6): CSS的渐变与图片边框

    作者: 分类:HTML5与CSS3.0 点击: 388 次
    wordpress CMS主题:ssmay主题

      本章我们接着探讨CSS3的一些新特性——渐变效果和图片边框。在一些网页中,我们看到了用JS实现的渐变效果,以及早期css2在IE浏览器下的filter实现的渐变效果,现在,通过CSS3我们就可以更加轻松地实现线性渐变和径向渐变 效果。

      1、线性渐变:linear-gradient(方位, 起始色, 末尾色) 

      background-image:linear-gradient(to top left,orange,green,red,blue);

      通过百分比设置多色线性位置,-45deg 是弧度

      background-image: linear-gradient(-45deg, orange 0%, green 20%, blue 40%,red 100%);

      默认情况下:起始颜色的百分比位置是 0%,末尾颜色的百分比位置是 100%,其他位置按照平均值分配。也可以使用 px 像素来设定,但计算麻烦点。

      结合背景,并使用透明渐变实现强大层次感

      rgba(red, green, blue, alpha)
      background-color: red;
      background-image: linear-gradient(to top, rgba(0,0,0,0.6),rgba(0,0,0,0));

      重复渐变属性值

      background-image: repeating-linear-gradient(to top, orange 10px, green 30px);

      2、径向渐变 radial-gradient(方位, 起始色, 末尾色)

      也可以复合方向,比如右下方

      background-image: radial-gradient(circle at right bottom, orange,green);

      关键字有点拗口,可以用像素表示半径,但不接受百分比

      background-image: radial-gradient(circle 50px, orange, green);

      同样,也有重复背景方式

      background-image: repeating-radial-gradient(circle 50px, orange,green);

      3、边框图片效果 IE11+ 才支持

      1.border-image-source //引入背景图片地址
      2.border-image-slice //切割引入背景图片
      3.border-image-width //边框图片的宽度
      4.border-image-repeat //边框背景图片的排列方式
      5.border-image-outset //边框背景向外扩张
      6.border-image //上面五个属性的简写方式

      简化使用:

      border-image:url(border.png) 27/27px/27px round ;
      参数对应:图片源,切割大小//边框图片的宽度/向外扩张 边框背景图片的排列

      border-image-repeat属性:

      stretch 用拉伸方式填充边框背景图。默认值。
      repeat 用平铺方式来填充边框背景图。当图片碰到边界时,如果超过则被截断。
      round 用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小。
      space 用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距。



      QQ二维码

    文章作者:hero2018
    本文地址:http://wanlimm.com/77201807286255.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.