为何学习前端不会学习CSS4？

html-css022

为何学习前端不会学习CSS4？,第1张

CSS4与展望目前CSS的成熟标准版本是CSS3,而且在移动端使用较多。CSS4的规范仍在制定中,W3C也在较早的时间公布了一些正在制定中的CSS4规范,例如$e>f、链接地址伪类any-link和:loca1-link、语言相关伪类dir、新的组分选择器。这些特性我们且先不去关注,因为目前还没看出太多亮点,而且实用性也不是特别强,相比现有的预处理器的语法逊色很多。由于兼容性问题,CSS4发布后也会处于与 Ecmascript6类似的处境( Ecmascript6至少还有 Node js支持),需要在前端转译后执行,既然都需要转译,那便和现在某个预处理器的语法规则没差别了,要完全兼容恐怕更是遥遥无期。一种可能的最终解决方案是和Ecmascript6一样借鉴现有一些预处理器的优点,整合形成新的规范语法,然后通过预处理器转译为最终的CSS。这样一个好处是,不用去纠结使用哪个预处理工具,全部以CSS4规范为准即可,但这只是一种可能性。简而言之,CSS4的处境将会比较尴尬,目前最新的浏览器仍没有支持CSS4特性的计划发布后不能兼容仍需要转译,就目前来看,CSS4新添加的特性优势并不明显且实用性不强,而且不如现有的预处理语法。所以只能看它后面的发展情况了。

偶然间发现一个简单实现四角边框的方法

比如 一个div 套个 input框, 然后div给个背景色

里面的input框用border-radius,这样就可以凸显出四个边角了

可以用表格做, 然后用JS判断,

判断每一行的第一个td  第二td 第三td 第四td的颜色

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>

<script type="text/javascript">

    $(function(){

            $('.table tr').each(function(){

                    

                    $(this).children('td').each(function(i){

                        if(i == 1){

                            $(this).css('color','#F54354')

                        }

                        if(i == 2){

                            $(this).css('color','#FF6699')

                        }

                        if(i == 3){

                            $(this).css('color','#9933FF')

                        }

                        if(i == 4){

                            $(this).css('color','#0044FF')

                        }

                            

                    })

            

            })

        })

</script>

<body>

<table class="table">

    <tr><td>第一</td><td>第二</td><td>第三</td><td>第四</td></tr>

    <tr><td>第一</td><td>第二</td><td>第三</td><td>第四</td></tr>

    <tr><td>第一</td><td>第二</td><td>第三</td><td>第四</td></tr>

    <tr><td>第一</td><td>第二</td><td>第三</td><td>第四</td></tr>

</table>

帮你做了个demo