CSS中一些冷门属性

英目花盗
876 阅读4分钟

字体变形

语法

    font-variant:small-caps;

用途

原本的大写字母保持不变，将小写字母全部转换为大写字母但字体变小，用于 新闻

    p:first-line
    {
        color:#ff0000;
        font-variant:small-caps;
    }

字符转换

语法

    text-transform: none | uppercase | lowercase | capitalize;

用途

可通过css转换字符为 “大写|小写|首字母大写”

处理空白符

语法

    white-space: normal | nowrap | pre | pre-wrap | pre-line;

用途

主要用来处理文本中的空白字符和换行符，属性依次对应如下：

  1. normal和nowrap都合并了空白符，忽略换行符，但是nowrap属性不允许换行，多用于“文本溢出以省略号显示”
  2. pre和pre-wrap都保留空白符和换行符，但是pre-wrap允许文本超出自动换行
  3. pre-line 合并空白符，保留换行符，允许换行

列表项图像

语法

    list-style-image : url(xxx.gif);

用途

使用图像作为列表的标志

属性选择器

语法

    // 包含title的所有元素
    *[title] {color:red;}
    // 属性moons="1"的元素
    planet[moons="1"] {color: red;}

用途

可以避免不停的给元素添加class

伪元素

语法

    p:first-line {}
    p:first-letter {}

用途

直接作用于文本的首行和首字母

all属性

语法

    all: initial | inherit;

用途

元素的部分css属性是可以继承的，而通过all可以重置所有属性，不论是自身的还是继承的。属性值依次对应如下

  1. initial 否定所有属性，还原为初始值
  2. inherit 否定自身属性，接受继承属性

伪装

语法

    appearance: button; 
    -moz-appearance: button; 
    -webkit-appearance: button;

用途

让元素看起来像一个按钮，默认具有按钮初始属性

背面

语法

    backface-visibility: visible | hidden;

用途

CSS3中通过rotate可以旋转元素，当设置backface-visibility为hidden，元素旋转到背面的时候就隐藏了

背景渐变

语法

    ackground-image: linear-gradient(direction, color1, color2, ...);

用途

可以将元素的背景色设置为渐变，属性依次对应如下：

  1. direction: to right | to left | to top | to bottom,也可以组合 to bottom right,也可以写角度值，比如30deg
  2. color 至少两个颜色，如果多个颜色就会出现多次渐变，同时color也可以用rgba显示，实现透明度渐变

文字渐变

    background-image: linear-gradient(to bottom right, red , yellow);
    background-clip: text;   // 背景色区域
    -webkit-background-clip: text; 
    color: transparent;      // 字体颜色为透明色

背景绘制区域

语法

    background-clip: border-box | padding-box | content-box;

用途

设置元素的背景绘制区域，属性值依次对应为：

  1. border-box 包含边框，当border-style设置为虚线或者原点的时候出现效果
  2. padding-box 除边框外全部绘制
  3. content-box 仅绘制内容区域

补充

chrome还支持-webkit-background-clip: text;

背景滚动

语法

    background-attachment: scroll | fixed | local;

用途

当页面滚动或者元素滚动时，设置背景图片的显示，属性值依次对应为：

  1. scroll 默认。背景图片随页面滚动而滚动
  2. fixed 背景图片不会随页面滚动
  3. local 背景图片随内容滚动而滚动

分列布局

语法

    // 列的数量
    column-count:3;
    // balance 列长短平衡
    column-fill: balance | auto;
    // 列与列之间的距离
    column-gap： 20px;
    // 列与列之间的间隔线：宽度 样式 颜色
    column-rule: 3px outset|inset|ridge|groove|double|solid|dashed|dotted #ff00ff;
    // 针对某个元素设置所占列数
    column-span: 1 | all;
    // 设置列的宽度，当不设置column-count时，列数=元素宽度/列宽
    column-width: 100px;

用途

用这个可以实现简单的瀑布布局，尤其处理文字最佳

内容

语法

    content:string | attr(attribute) | url();

用途

  1. string 显示具体的内容或者字符集图标，如content: "\e63a";，常配合:before和:after使用
  2. attr(attribute) 获取元素的属性值显示，常配合:before和:after使用
  3. url() 可实现用图片替换原本内容，配合:hover使用

内容编号

语法

    // 创建一个名字叫section的计数器
    counter-reset:section;
    // 将计数器section递增一次
    counter-increment:section;
    // 输出计数器
    content: counter(section);

用途

可以实现类似书本目录的功能，对每一个标题进行编号

    body {
        counter-reset:section;
    }
    h1:before {
        counter-increment:section;
        content: counter(section);
    }

引入字体

语法

    // 声明一个字体
    @font-face
    {
        font-family: myFirstFont;
        src: url('Sansation_Light.ttf')
            ,url('Sansation_Light.eot'); /* IE9 */
    }
    // 引用字体
    div
    {
        font-family:myFirstFont;
    }

用途

网站终于可以使用字体以外的预先选择“合法”字体

字间距

语法

    letter-spacing: 2px;

用途

可以增加或者减少字符之间的间距

轮廓

语法

    // 轮廓：width style color
    outline:2px solid red;
    // 轮廓与border之间的距离
    outline-offset:15px;

用途

元素除了border之外还可以增加一个边框，这个边框还不占据元素位置

文字垂直显示

语法

    writing-mode:  vertical-rl | vertical-lr;

用途

文字可以向古文那样垂直显示，vertical-rl垂直从右到左，vertical-lr垂直从左到右

avatar
文章
阅读
粉丝