• CC
    2019-02-07
    在网站上搜索了一下，发现 css 函数有不少，尤其是近三年，增加的函数几乎超过过去的总和。

    按照 winter 老师提到「知识完备性」的思路，尝试整理了一下 CSS 函数。

    按照功能，分成以下 5 个类别（可能并不完全准确）：

    # 1. 图片

    * filter
        * blur()
        * brightness()
        * contrast()
        * drop-shadow()
        * grayscale()
        * hue_rotate()
        * invert()
        * opacity()
        * saturate()
        * sepia()
    * cross-fade()
    * element()
    * image-set()
    * imagefunction()

    # 2. 图形绘制
    * conic-gradient()
    * linear-gradient()
    * radial-gradient()
    * repeating-linear-gradient()
    * repeating-radial-gradient()
    * shape()

    # 3. 布局
    * calc()
    * clamp()
    * fit-content()
    * max()
    * min()
    * minmax()
    * repeat()

    # 4. 变形/动画
    * transform
        * matrix()
        * matrix3d()
        * perspective()
        * rotate()
        * rotate3d()
        * rotateX()
        * rotateY()
        * rotateZ()
        * scale()
        * scale3d()
        * scaleX()
        * scaleY()
        * scaleZ()
        * skew()
        * skewX()
        * skewY()
        * translate()
        * translate3d()
        * translateX()
        * translateY()
        * translateZ()

    # 5. 环境与元素
    * var()
    * env()
    * attr()
    展开
     2
     257
  • Sevens 些粉
    2019-02-08
    推荐一下《css世界》这本书，有理论基础也有实战应用和常遇坑，看了两章感觉不错。
     1
     57
  • 米斯特菠萝
    2019-02-09
    我看到winter老师讲解这些冷门的知识，忽然意识到什么叫做精通？要精通就要抠这种细节，这样才能做到精通

    做就要做精通，前端是一种手艺人
    
     27
  • 文全
    2019-02-07
    @import 用于引入一个 CSS 文件，除了 @charset 规则不会被引入，@import 可以引入另一个 JavaScript 文件的全部内容。这段写错了 应该是css 文件全部内容
    
     14
  • mimof9
    2019-02-08
    试了一下 toggle这个函数 并没有效果。clac实测下来是有效果的。
     3
     8
  • Aaaaaaaaaaayou
    2019-02-07
    “只有伪类可以出现在伪元素之后”是不是写反了
    
     7
  • 无痕
    2019-03-04
    “||”这个选择器我怎么没搜到，是什么意思
    
     4
  • 花骨朵
    2019-02-28
    css函数：https://www.w3cplus.com/css/css-functions.html
    
     2
  • Rushan-Chen
    2019-02-13
    @mimof9
    文章的链接是CSS4 working draft状态的文档，是很新的文档。

    看了下CSS3 Candidate Recommendation状态的文档，没有toggle()、min()、max()、clamp()，这几个函数应该是css4新加的，基本上浏览器都还不支持。

    attr()虽然css3文档有，查了下，浏览器也都不支持。😂

    等浏览器支持估计还要一段时间吧，现在先知道有这个东西就好，我是这样想的。
    展开
    
     2
  • 南蓝
    2019-02-12
    @ counter-style 只在火狐上有用

        <style>
            @counter-style circled-alpha {
                system: fixed;
                symbols: "\7532""\4E59""\4E19""\4E01""\620A""\5DF1""\5E9A""\8F9B""\58EC""\7678";
                /* 甲 乙 丙 丁 戊 己 庚 辛 壬 癸 */
                suffix: " ";
            }

            ul li {
                list-style: circled-alpha;

            }
        </style>
    </head>

    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </body>
    展开
    
     2
  • 饼
    2019-06-05
    不少函数还没法用，目前还是var clac比较接近实用了
    
     1
  • 前端男孩
    2019-06-04
    本来想发张思维导图的，但是貌似不支持发图，想想算了，也就整理了67个css函数，也不知道够不够。
    
     1
  • 王峰
    2019-04-17
    选择器还有一种情况就是*通配符，它不属于标签选择器，也没有优先级
    
     1
  • 🚂🚂🚂
    2019-03-04
    CSS Functions
    Alphabetical list of CSS functions included in CSS3.

    attr()
    blur()
    brightness()
    calc()
    circle()
    contrast()
    counter()
    counters()
    cubic-bezier()
    drop-shadow()
    ellipse()
    grayscale()
    hsl()
    hsla()
    hue-rotate()
    hwb()
    image()
    inset()
    invert()
    linear-gradient()
    matrix()
    matrix3d()
    opacity()
    perspective()
    polygon()
    radial-gradient()
    repeating-linear-gradient()
    repeating-radial-gradient()
    rgb()
    rgba()
    rotate()
    rotate3d()
    rotateX()
    rotateY()
    rotateZ()
    saturate()
    sepia()
    scale()
    scale3d()
    scaleX()
    scaleY()
    scaleZ()
    skew()
    skewX()
    skewY()
    symbols()
    translate()
    translate3d()
    translateX()
    translateY()
    translateZ()
    url()
    展开
    
     1
  • 吴前端
    2019-02-19
    toggle()函数试了下在google 火狐打开都没用呢显示无效属性值

    作者回复: 移动端问题不大，已经都是webkit了。
    不过我还真没注意火狐没这个函数。

    
     1
  • 胡永
    2019-02-12
    Pseudo class selector
    
     1
  • hhk
    2019-02-07
    css语法：at 规则 + 普通规则
    普通规则：选择器 + 声明区块

    另外，margin 的读音好像读错了
    
     1
  • 小夜
    2019-10-25
    @namespace svg url(http://www.w3.org/2000/svg)
    请问这个 声明这个 namespace 的必要性在哪里，在什么情况下会需要使用这个规则

    作者回复: 这是选svg元素的时候的简写啊，跟html的namespace对应的

    
    
  • Jackzhoumine
    2019-09-14
    按照规范，应该使用双冒号（::）而不是单个冒号（:），以便区分伪类和伪元素。但是，由于旧版本的 W3C 规范并未对此进行特别区分，因此目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素。
    
    
  • Cris
    2019-09-12
    Winter老师的课程，给我的帮助就是能够让我宏观上建立知识框架，至于细枝末节，也需要自己私下里再下功夫
    
    
我们在线，来聊聊吧