CSS 语法整理

2017-07-31 本文已影响0人流云012

平常项目中遇到的css不常用语法整理

css问题解决及说明相关网址

Css项目中不常见属性汇总

字体样式设置：

单词间距：word-spacing:8px; 字与字间距：letter-spacing: 1px;
设置开头缩进(两个字)：text-indent : 2em;
阻止按钮的默认行为：pointer-events: none;
具体用法：pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit
实际应用案例： ① 提交页面，提交按钮点击后，添加这个样式属性（style="pointer-events"），来防止重复提交。
② 一些层的绝对定位，覆盖按钮，穿透可以点击它。等等。
简单的文字模糊效果

    p {
    color: transparent;
    text-shadow: #111 0 0 5px;
    }

<p style="color: transparent;text-shadow: #111 0 0 3px;">提交页面，提交按钮点击后，</p>

css 垂直居中

方案1：将父容器设置为 display: table, 然后将子元素设置为 display: table-cell, 然后加上 vertical-align: middle来实现。
方案2：利用 translate 来实现水平垂直居中样式，需 IE9+。

    .center-vertical {
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); 
    }

多重边框

利用重复制定 box-shadow 来达到多个边框的效果

    /*CSS Border with Box-Shadow Example*/
    div {
        box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);
        height: 200px;
        margin: 50px auto;
        width: 400px
    }

取消chrome浏览器下input和textarea的默认样式(轮廓)

input, button, select, textarea{
    outline: none;
}
textarea{
    resize: none;  // 文本框不可拖拽
}

溢出显示省略号（...）：

// 单行文本
p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
// 多行文本的溢出显示省略号（2行，可调整）
p {
     overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

特殊选择器：::selection 用来改变浏览器网页选中中文的默认效果
css中文竖向排列的属性：writing-mode
段落开头缩进两个文字间距： text-indent:2em;

select 框右对齐的方法：

①、select {direction: rtl;}
②、<select dir="rtl">
        <option>Foo</option>    
   </select>

Firefox专属hack的写法: 解决 line-height 无法垂直居中问题

@-moz-document url-prefix(){
    button{
      padding-top:2px;
    }
  }

移动端 H5页面怎么样消除点击阴影

a,img,button,input,textarea{-webkit-tap-highlight-color:rgba(255,255,255,0);}

CSS 语法整理

css问题解决及说明相关网址

Css项目中不常见属性汇总

猜你喜欢

热点阅读