• css样式-记录没记住的样式


    目录

    1.区域内文字不会被选中

    2.textarea标签去掉右下角的斜线

    3.浏览器对css样式的兼容性(eg:透明度、变形、过渡)

    4.图片添加白边的显示效果

    5.实现同一行中图片和文本垂直居中

    --------------------------------------------------------------------

    1.区域内文字不会被选中

    要注意浏览器的兼容性:

    -webkit-user-select:none;

    -moz-user-select:none;

    -ms-user-select:none;

    user-select:none;

    2.textarea标签去掉右下角的斜线

    resize:none;

    3.浏览器对css样式的兼容性(透明度、变形、过渡)

       浏览器                 前缀 

    IE和safari             -webkit-
     Chrome                -ms-
     Firefox                  -moz-

    举例:

    透明度:

        opacity: 0.8;
        filter: alpha(opacity = 80);
    变形:
    transform:rotate(7deg);
    -ms-transform:rotate(7deg); 	/* IE 9 */
    -moz-transform:rotate(7deg); 	/* Firefox */
    -webkit-transform:rotate(7deg); /* Safari 和 Chrome */
    -o-transform:rotate(7deg); 	/* Opera */
    过渡:
    transition:width 2s;
    -moz-transition:width 2s; /* Firefox 4 */
    -webkit-transition:width 2s; /* Safari and Chrome */
    -o-transition:width 2s; /* Opera */
    4.图片添加白边的显示效果

    原图:

     加工后:

     大致的效果可以出现

    border:10px solid white;

    background: black;

    transform: rotate(45deg);

    原理:设置白色边框和黑色背景

    问题:但是不知道为什么,图片正常情况下(不设置旋转)背景效果失效,在设置了旋转(transform:rotate())后效果出来了

    5.实现同一行中图片和文本垂直居中

    为图片和文本都设置vertical-align:middle

  • 相关阅读:
    装饰器模式
    mockups 安装
    单例设计模式
    css优先级问题
    GPU的nvadiasmi解析
    conda配置镜像并安装gpu版本pytorch和tensorflow2
    索引的优化
    [转]必须掌握的八个【cmd 命令行】
    BDE莫名的不自动COMMIT问题
    窗体控件笔记
  • 原文地址:https://www.cnblogs.com/-217/p/12347949.html
Copyright © 2020-2023  润新知