• CSS3


    前缀

    浏览器

    -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%,

        

  • 相关阅读:
    第一次结对编程作业
    第一次个人编程作业
    获取file中字段,写入到TXT文件中
    通过file中的字段查询MySQL内容
    MySQL常用语句
    MySQL乱码问题
    脚本数据编码格式转换
    mysql 常用命令操作
    thinkphp项目 Class 'finfo' not found
    POJ3255--次短路
  • 原文地址:https://www.cnblogs.com/dreamMargin/p/9656633.html
Copyright © 2020-2023  润新知