背景新增属性和css渐变及倒影

背景新增属性和css渐变及倒影

一、background新增属性

  background-size:指定对象的背景图像的尺寸大小。

  background:url() 0 0,url() 0 100%;多背景

  background-origin:指定对象的背景图像定位的原点。

   background-clip:指定对象的背景图像向外裁剪的区域。

  background-image:linear-gradient()线性渐变

  background-image:repeating-linear-gradient()重复的线性渐变

  background-image:radial-gradient()径向渐变

  background-image:repeating-radial-gradient()重复的径向渐变

  background-origin 设置背景定位的原点

  border-box: 从border区域开始绘制背景。

  padding-box: 从padding区域开始绘制背景。

  content-box: 从content内容区域开始绘制显示背

  background-clip 背景裁剪区域

  border-box: 从border区域向外裁剪背景。

  padding-box: 从padding区域向外裁剪背景。

  content-box: 从content区域向外裁剪背景。

  text:前景内容的形状(比如文字)作为裁剪区域向外裁剪 (需加前缀)

背景新增属性和css渐变及倒影

二、gradient渐变

  gradient可以应用在所有接受背景图像的属性上

    linear-gradient: (线性渐变) 创建遮罩图像。

    radial-gradient: (径向渐变) 创建遮罩图像。

    repeating-linear-gradient: 重复的(线性渐变) 创建遮罩图像。

    repeating-radial-gradient: 重复的(径向渐变) 创建遮罩图像。

三、线性渐变

  linear-gradient(角度,点,点,...)

    角度的方位值:从什么方向开始渐变

    to left: 设置渐变为从右到左。 相当于: 270deg

    to right: 设置渐变从左到右。 相当于: 90deg

    to top: 设置渐变从下到上。 相当于: 0deg

    to bottom(默认):设置渐变从上到下。相当于: 180deg。这是默认值,等同于留空不写。

  对角渐变:to top left | to top right | to bottom right | to bottom left

  角度数值:从什么角度开始渐变,单位(deg)

  点:渐变点的颜色和位置

  颜色 : 位置:%|px

    如:red 50%, blue 100%(红色从50%渐变到100%为蓝色)

  linear-gradient(30deg, red 10%, green 10%)

  线性渐变重复平铺:repeating-linear-gradient:

背景新增属性和css渐变及倒影

四、径向渐变

  radial-gradient( shape [ size ] at [ position ],color 位置,color 位置,+)

  shape: circle(圆) | ellipse (椭圆 默认)

   size: 半径

    圆形的半径圆只有一个值,椭圆有两个值,px | 关键词

  关键词:

    closest-side: 圆心到最近的边

    closest-corner: 圆心到最近的角

    farthest-side: 圆心到离圆心最远的边

    farthest-corner(默认): 圆心到离圆心最远的角

  radial-gradient( shape [ size ] at [ position ],color 位置,color 位置,+)

  position 确定圆心的位置,X坐标,Y纵坐标;如果只提供一个,第二值默认为50%,即center

    值: 关键词 px %   

      X关键词 :left:左 center:中 right:右

      Y关键词 :top:上 center:中 bottom:下

      例:radial-gradient(ellipse 100% 100% at 300px 300px, #f00 10%, #ff0 20%, #080 100%)

  repeating-radial-gradient () 线性渐变重复平铺

背景新增属性和css渐变及倒影

五、盒子阴影

  box-shadow 属性向框添加一个或多个阴影

    box-shadow:h-shadow v-shadow blur spread color inset ;

      h-shadow 水平阴影的位置。允许负值

      v-shadow 垂直阴影的位置。允许负值

      blur 模糊距离

      spread 阴影的尺寸

      color 阴影的颜色

      inset 将外部阴影 (outset) 改为内部阴影

六、盒子倒影

   box-reflect:none | direction offset

   mask-box-image

    direction: 倒影在对象的位置

      above 上

      below 下

      left 左

      right 右

    offset:用长度值来定义倒影与对象之间的间隔,可以为负值 length | percentage

    mask-box-image: 遮罩图像

      <url>: 使用绝对或相对地址指定遮罩图像。

      linear-gradient: 使用线性渐变创建遮罩图像。

      radial-gradient: 使用径向(放射性)渐变创建遮罩图像。

      repeating-linear-gradient: 使用重复的线性渐变创建背遮罩像。

      repeating-radial-gradient: 使用重复的径向(放射性)渐变创建遮罩图像。

      none:无遮罩图像

背景新增属性和css渐变及倒影

七、 MASKS遮罩/蒙版

  -webkit-mask-image 遮罩图片

    :url('');

    linear-gradient

    radial-gradient

   -webkit-mask-repeat 遮罩平铺

    repeat

    no-repeat

    repeat-x

    repeat-y

  -webkit-mask-position 遮罩位置

    关键词 | % | length

  -webkit-mask-size 遮罩尺寸

     % | length

背景新增属性和css渐变及倒影

  参考网址:https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask#浏览器兼容性

上一篇:Linux下使用Magent+Memcached缓存服务器集群部署


下一篇:Twemproxy 缓存代理服务器