• 移动端 几个css3属性的练习


    转行做前端,上班有一个星期了,什么都不懂,今天学习了几个新的css3属性,记录下来。

    注:所有的测试均是在chrome上手机模式测试,与真实的手机环境可能有误差

    1:-webkit-tap-heighlight-color:rgba();改变safari 与大部分android机可点击元素,点击时产生的半透明灰色背景

    在ios safari 与大部分android机中有效,alpha设置为0时,去掉背景色;

    点击是默认状态:

    2:   ::selection选择器

    w3c school中说明:

    ::selection 选择器匹配被用户选取的选取是部分(即当文本本选中时,默认选中状态背景为蓝色,可以通过::selection选择器设置选中本分的对应状态)。

    只能向 ::selection 选择器应用少量 CSS 属性:color、background、cursor 以及 outline。

    兼容性:

    IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。

    Firefox 支持替代的 ::-moz-selection。

    3:-webkit-nbsp-mode:normal | space 没有做出例子,不知道具体怎样用

    4:-webkit-text-strock   设置位子边框宽度,-webkit-text-strock:2px red;结合 color:transparent;创建镂空字体。效果图:

    p.text-stroke{
    			color: transparent;
    			-webkit-text-stroke: 1px red;
    			font-size: 160px;<!--字号要大!!!!-->
    		}
    

      

  • 相关阅读:
    CCS样式命名
    BFC机制
    html及css小结
    盒模型
    C#函数的使用方法
    如何读代码
    利用CSS-border属性实现圆饼图表
    WNMP环境搭建(win10+Ndinx1.9.15+MySQL5.7.12+PHP5.6.21)
    vue 项目优化:引入cdn使用插件, 减少打包体积
    'PORT' 不是内部或外部命令,也不是可运行的程序
  • 原文地址:https://www.cnblogs.com/wbengineer/p/4628931.html
Copyright © 2020-2023  润新知