• css3的一些新属性及部分用法


       CSS3是CSS(层叠样式表)技术的升级版本,增加了很多新属性,我们在web开发中采用css3技术可以提高程序的性能以及用户体验。而且一般面试中会问到知道哪些新增加的属性,我们不可能将所有东西一一复述给面试官,需要自己有一个清晰的思路,可以选择自己使用过的一些新属性来阐述。

      在W3school上css3被划分为模块,其中最重要的CSS3模块包括:

    1. 选择器
    2. 框模型
    3. 背景及边框、文本效果
    4. 2D/3D转换
    5. 动画
    6. 多列布局
    7. 用户界面

      下面按着自己比较了解的往下写。

    一、边框特性

    CSS3对网页中的边框进行了一些改进,主要包括支持圆角边框、多层边框、边框色彩与图片等。在CSS3中最常用的一个改进就是圆角边框,通过CSS3的属性可以快速实现圆角定义,而不必像css2中再为每个圆角使用不同的图片。

    /*圆角边框*/
    div{
      border:1px solid;
      border-radius:30px;
    }
     
    /*图片边框*/
    div{
      border-image:url(border.png) 35 35 round;
     }

    二、阴影效果

    我们可以给方框添加阴影,也可以给文本添加阴影,在此可以规定水平阴影,垂直阴影、模糊距离以及阴影的颜色的具体值。

    /*box-shadow:水平阴影 垂直阴影 模糊距离 阴影的颜色*/
    /*给div添加阴影*/
    div { box-shadow: 10px 10px 5px #888888; }
    /*给标题添加阴影*/
    h1
    {
    text-shadow: 5px 5px 5px #FF0000;
    }

    三、css3文本自动换行Word-wrap  

    文本溢出Text-overflow 的区别

    未完待续......

     
    不要忘了自己为了什么前进
  • 相关阅读:
    动态内存
    数组
    localstorage基础
    xampp 虚拟机配置
    浏览器兼容性问题积累
    做动画的一大接口 requestAnimationFrame
    canvas 基础
    svn--confilct了怎么办?
    【javascript设计模式】构造器模式、模块模式、单例模式
    关于优雅降级和渐进增强
  • 原文地址:https://www.cnblogs.com/songForU/p/10435545.html
Copyright © 2020-2023  润新知