梦幻

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

前缀

浏览器

-webkit

chrome和safari

-moz

firefox

-ms

IE

-o

opera

阴影

  box-shadow:X轴偏移量,Y轴偏移量,    模糊距离,阴影宽度,inset为内部阴影,忽略为外部阴影;

  如果需要添加多个阴影,只需要用逗号隔开
  .box_shadow{
       box-shadow:

      4px 2px 6px #f00,

      -4px -2px 6px #000,

      0px 0px 12px 5px #33CC00 inset;
  }

边框图片

  border-image:url(images/图片.png) 宽度  repeat;

  repeat 重复,round 平铺,stretch 拉伸;

渐变

颜色渐变分为线性渐变(linear)和径向渐变(radial);

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

  第一个参数可以直接是方向,也可以是0deg到360deg;

  颜色的过度为第一个到最后一个,中间可以填写多个颜色。

文字

  文字过多时用:text-overflow:ellipsis;

  clip  剪切  ellipsis 省略号

  强制为一行  white-space:nowrap; 

  超出隐藏 overflow:hidden; 

  word-wrap:break-word;  文字超过一定长度自动换行;

  text-shadow  文字阴影

    语法:

      text-shadow: X-Offset Y-Offset blur color;

      X-Offset:表示阴影的水平偏移距离,其值为正值时阴影向右偏移,反之向左偏移;      

      Y-Offset:是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移,反之向上偏移;

      Blur:是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0;

      Color:是指阴影的颜色,其可以使用rgba色

 背景 

  背景图片原始位置  background-origin

  background-origin:border-box;

  border,padding,content;

  如果背景不是no-repeat时,则没有效果;

  背景剪切  background-clip:border-box;

        no-clip:不剪切

  背景大小  background-size:auto;

        auto为默认值,可以为px和百分比;

        cover,覆盖  contain,容纳

  多重背景之间只需要用逗号隔开就可以 慕课

  1. 用逗号隔开每组 background 的缩写值;
  2. 如果有 size 值,需要紧跟 position 并且用 "/" 隔开;
  3. 如果有多个背景图片,而其他属性只有一个(例如 background-repeat 只有一个),表明所有背景图片应用该属性值。
  4. background-color 只能设置一个。
  5. background:url(http://static.mukewang.com/static/img/logo_index.png) no-repeat  right bottom / 75% 55%,

 

 

    

 

posted on 2018-09-16 17:14  ⅠⅡ  阅读(177)  评论(0编辑  收藏  举报