CSS3新特性学习

wing324 发布于2019-08-29 12:31 / 1638人阅读

摘要：引言最近发现很多的新特性不熟悉，所以今天把它们都学习一边，做出效果加深印象，说到还加了蛮多的特性，像一些的一些效果，动画属性等。

引言

最近发现很多css3的新特性不熟悉，所以今天把它们都学习一边，做出效果加深印象，说到css3还加了蛮多的特性，像一些border的一些效果，动画属性animation trasiform等。

1.border-radius（边框圆角） 效果

　实现代码：

    height: 100px;
    width: 100px;
    margin: 0 auto;
    background-color: #E0e0e0;
    border-radius: 10px

加上下面这两个是为了兼容chrome和fixfox旧版本

    -moz-border-radius: 10px;/* chrome */    
    -webkit-border-radius: 10px;/* fixfox */

这个属性很有趣，还可用来画圆，把值设为百分比，可以画任意大小的圆

    border-radius: 50%;
    -moz-border-radius: 50%;/* chrome */
    -webkit-border-radius: 50%;/* fixfox */

　圆效果

2.box-shadow（边框阴影）

这个可就厉害了，可以做出立体效果，也可以使边框很炫酷

　语法：

box-shadow: h-shadow v-shadow blur spread color inset;    
h-shadow:水平阴影位置
v-shadow:垂直阴影位置
blur:模糊距离
spread：阴影尺寸
color：阴影颜色
inset：内部阴影 默认为outset

　效果

　代码

box-shadow: 10px 10px 4px #A5A5A5;

用在input上

代码

box-shadow:0 0 8px 2px #9668db;

3.text-overflow(文本溢出隐藏）

设置div的宽高固定，文字太多时会超出div的边框

我们要实现下面效果，以三个点号代替省略的文字

代码

        text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;

　４.transform（动画）

鼠标移入时动画：

样式

    .di{
            
            width: 100px;
            height: 100px;
            margin: 100px auto;
            background-color: #E0e0e0;
            transition:width 1s, height 1s;
            -moz-transition:width 1s, height 1s, -moz-transform 1s; /* 可以支持Firefox 4 */
            -webkit-transition:width 1s, height 1s, -webkit-transform 1s; /* 可以支持Safari and Chrome */
            -o-transition:width 1s, height 1s, -o-transform 1s; /* 可以支持Opera */
    }

鼠标移入时

    .di:hover{
        width:200px;
        height:200px;
        transform:rotate(180deg); /*旋转180度*/
        -moz-transform:rotate(180deg); /* 可以支持Firefox 4 */
        -webkit-transform:rotate(180deg); /* 可以支持Safari and Chrome */
        -o-transform:rotate(180deg); /* 可以支持Opera */
    }

未完待续。。

GPU云服务器云服务器 css3 css3气泡 css3动画 JS+CSS3

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111959.html

Jdk1.8新特性学习（Optional）

摘要：它的出现是为我们解决空指针异常的，以前我们写代码如果不进行判断，会经常出现异常。因为它本身就是个对象，不管放进去的对象为不为，始终不会返回，所以你也不需要在你的业务流程中进行一大堆的判断，避免了程序运行时的空指针异常。想必大家已经在使用jdk1.8做项目开发，但是你对于它里面的一些性特性了解多少呢？有没有在你的项目中运用呢？现在就和我来一起梳理一下吧。介绍它是java.util包...

liaosilzu2007 2019-08-19 11:33 评论0 收藏0
Es6新特性学习

摘要：基础语法变量提升都可以个难点在编译时执行并没有报错，执行结果如图注意结果没有变更改结果值变了参考新特性未完一直更新基础语法变量提升 //es5 var arr = []; for(var i=0; i

AlphaWallet 2019-08-23 13:44 评论0 收藏0
Java8新特性学习笔记

摘要：虽然目前工作环境仍然以为主，不过目前已是大势所趋了。标准函数式接口新的包定义旨在使用的广泛函数式接口。这一改进使得拥有了类似于多继承的能力。从Java8发布到现在有好几年了,而Java9也提上发布日程了(没记错的话好像就是这个月2017年7月，也许会再度跳票吧，不过没关系，稳定大于一切，稳定了再发布也行)，现在才开始去真正学习，说来也是惭愧。虽然目前工作环境仍然以Java6为主，不过...

wthee 2019-08-15 10:46 评论0 收藏0
JDK 1.8 新特性学习（Stream）

摘要：会在数据源内部隐式的遍历进行处理。会并行遍历数据，将数据分成若干段，同时进行处理，最终汇总结果一起输出。结束操作会触发实际计算，计算发生时会把所有中间操作积攒的操作以的方式执行，这样可以减少迭代次数。为函数式编程而生。 Stream实现了对数据源的流式处理，它可以并行操作，提高数据处理效率。什么是流流不是集合，它不对数据做保存，只是最数据进行算法处理，比如最大值，最小值，排序等操作...

yhaolpz 2019-08-19 11:33 评论0 收藏0
[ ES6 ] 一. ECMAScript 6 相关学习资源

摘要：浏览器兼容性列表可以看到还是全线飘红的和支持特新列表据此在和上使用这些新特新待补充二相关教程最重要的产品规格书，什么教程也脱离不了这里的标准，英文好的还是多看点。一. ES6新特性相关 es6features : 经典的ES6新特性预览，github 逼近 10k star . ES6新特性概览：同样也很全面的特性介绍的中文版。浏览器兼容性列表：可以看到还是全线飘红的~~~ ...

Towers 2019-08-21 10:40 评论0 收藏0