精华内容
下载资源
问答
  • css3新特性
    千次阅读
    2018-05-16 10:50:24

         最近在学习一个用JS写的动画的插件,目的是为了使用好看的动画效果。

        事实上运用css3的新的动画样式可以很好的实现该功能。

    1 CSS3 的圆角特性

    border-radious

    2 css3的边框特性

    border-shadow

    border-image

    3 css3的文本效果

    text-shadow

    word-wrap:break-word(截断文字,不超出父元素)

    4 css3的背景效果

     background-size

    background-origin(背景内容区域):分为context-box padding-box border-box

    5 css3的的2D翻转

    常使用的是 :translate() 水平位移   retate() 翻转

    6 css3的3D翻转

    常使用的是 rotateX()和rotateY()这两个方法

    7 css3的过渡

    transition()

    需要规定属性和时间 可以叠加多个属性

    8 css3的动画 

    和@keyframe 相关

    设置从0%-100%的渐变

    9 css3的多列

    这个是css我觉得最棒很有用的一些属性

    column-count属性

    column-width属性

    column-gap属性


    更多相关内容
  • 深入了解CSS3新特性

    2019-07-22 19:31:22
    资源名称:深入了解 CSS3 新特性资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
  • css3新特性

    2022-06-17 21:30:46
    css3新特性详解

    阅读需要5分钟。

            css的新特性是随着时代发展,从人们认为的必须增加的一些新功能或新属性。不管是安卓手机还是iPhone,他们的UI设计都偏向于扁平化设计,兼具实用性和美观性。网页设计一定程度上可以看成是平面设计,需要吸收前沿的大众喜欢的设计风格。

    目录

    1,圆角border-radius

    2,阴影之box-shadow

    3,阴影之text-shadow

    4,背景渐变linear-gradient

    5,转换transform

    1,translate()移动

    2,rotate()旋转

    3,scale()缩放

    4,skew()倾斜

    5,3D转换之rotateX()

    6,3D转换之rotateY()

    7,translate3d()

    六,过渡transition

    七,动画animation

    1,@keyframes创建动画

    2,animation执行动画

    八,绘制特殊图形

    九,媒体查询

    1,设置meta标签

    2,媒体查询语句

    十,响应式布局

    十一,栅格系统

    十二,多列

    1,创建多列

    2,设置每列之间的间隙

    3,列边框


    1,圆角border-radius

            html的一些常见元素都类似于矩形,四四方方的。css属性border-radius可以为任意html元素设置圆角。这个属性呈现的样式有属性值的个数决定。当有四个值,对应矩形顺时针的四个直角。两个值是分别是:X对角线的两个直角。一个值时包括4个直角。

            单位是px,他是四分之一圆的半径值。实例如下:

        <style>
            .container {
                background-color: aqua;
                margin: 0 auto;
                width: 400px;
                height: 400px;
                border-radius: 50px;
            }
        </style>
    <body>
        <div class="container">
    
        </div>
    </body>

    网页显示效果如下:

    2,阴影之box-shadow

            阴影指的是:物体把光遮住留下的影子。

             blur用于增加模糊度。举例:使用复合属性写法。

    box-shadow: 10px 10px 5px 5px cornflowerblue;/*依次对应各个属性*/

            网页显示效果如下:

    3,阴影之text-shadow

    4,背景渐变linear-gradient

            类似于晚霞的效果,落霞与孤鹜齐飞,秋水共长天一色。

            direction有:1,to right;2,to left;3,to bottom right;4,to bottom等。另外还有角度值,以deg为单位,以直角坐标系为参照,顺时针取角度。取值为-180到180之间。

    5,转换transform

            英文名transform,转换指的是:让元素改变性质,大小或者位置。常见的操作为:旋转,放缩,移动和倾斜。这四种操作都可以在2D或者3D形式下操作。

            有些属性的值可能是函数形式的,称为css函数,例如伪类选择器的:not(),他是一个取非函数。transform是一个属性,他的属性值也是一个函数。

    1,translate()移动

            translate即转移的意思,让元素以网页左上角为参考点,向右或者向下移动。

    .box{
    width: 100px;
    height: 80px;
    background-color: rgba(255,0,0,.8);
    transform: translate(50px,100px);
    }
    

    2,rotate()旋转

    3,scale()缩放

            scale方法用于元素放大缩小。scale(2,3)指的是x轴放大2两倍,y轴放大3倍。我么知道html的文字最小为12px,要想使字体更小,使用scale()放下缩小即可。

    4,skew()倾斜

    5,3D转换之rotateX()

    6,3D转换之rotateY()

    7,translate3d()

            实现元素上下左右漂浮。

    .box:hover{
    box-shadow: 0 15px 30px 10px rgba(e,e,e,0.5);
    transform: translate3d(0,-10px,0);/*z,y,z */
    }
    

    六,过渡transition

            过渡:让元素从一种样式到另一种样式,从而实现动画的效果,他需要时间进行触发。他的属性值如下:

    七,动画animation

            动画能够更加精准地控制样式过渡效果。可以从第一种样式到第二种样式再到第三种样式,利用所占百分比来确定每个过渡所占用的时间。

    1,@keyframes创建动画

            name是动画名字。percent是到哪个百分比停止当前进入到下一个样式。

    2,animation执行动画

    <style>
    .box{
    width: 200px;height: 200px;
    background: red;
    animation: colors 2s linear 1s direction fill-mode;
    
    @keyframes colors {
    0%{
    background: red;
    }
    50%{
    background: yellow;
    }
    100%{
    background: green;
    }
    }
    </style>
    

    八,绘制特殊图形

            将元素的width和height设置为0,利用border属性和transparent属性值进行绘制。

    .box{
    width: 0;height: 0;
    border-top: 100px solid transparent;
    border-right: 100px solid rosybrown;
    border-bottom: 100px solid transparent;
    border-left: 100px solid transparent;
    }
    I
    

            上面的代码可以绘制三角形。

    九,媒体查询

            这里的媒体是指:各种应用前端技术的设备信息。媒体查询是指:自动获取当前设备的屏幕信息,以便于采用渲染方式,使同一种样式在不同设备上显示出不同的效果。

    1,设置meta标签

            一般这个标签不用我们写,一般的ide会自动补全。

    2,媒体查询语句

    @media screen and (max-width: 768px) {
    *设备小于768px加载样式,语法是:and + (属性)*/
    body{
    background-color: red;
        }
    }
    @media screen and (max-width: 992px) and (min-width: 768px){
    *设备小于768px但小于992px加载样式*/
    body{
    background-color: pink;
        }
    }
    @media screen and (min-width: 992px) {
    *设备大于992px加载样式*/
    body{
    background-color: green;
        }
    }
    

            依次对应手机,平板,显示器的屏幕,之后还会有折叠屏手机的css布局形式。

    十,响应式布局

            响应式布局是一种设计思维,他与媒体查询大同小异,功能差不多。因为现在手机,电脑,物联设备等设备的显示屏大小不一,我们可以为这些设备各自开发一套界面,也可以让渲染引擎自动选择去显示。

            响应式局部就是让一套代码能够在不同设备上显示,通过隐藏或者缩小相关元素来实现整个网页的功能完整性和美观性。

    十一,栅格系统

            栅格系统是媒体查询的具体实现,是一种规定的写法,能够最小限度保证在各个设备上的显示美观性。

            当我们拿到一张很大的纸,我们估计会从左上角开始,从左往右进行绘画。如果我们拿到一张像手机屏幕一样的纸,那该怎么办?最佳方案就是:从上往下画。这就是栅格系统。

            我们可以直接使用bootstrap的grid.css来实现栅格系统。

    十二,多列

            多列可以让文本内容像报纸一样进行排版布局。

    1,创建多列

    2,设置每列之间的间隙

    3,列边框

            属性简写:

            多列网页展示。 

    展开全文
  • 这是一个对IE8及以下做前端兼容的文件工具...--对于ie6到ie8做兼容,兼容h5,css3新特性--> <!--[if (gte IE 6)&(lte IE 8)]> [removed][removed] [removed][removed] [removed][removed] <![endif]-->
  • HTML5&CSS3新特性

    千次阅读 2022-05-02 17:36:36
    一.HTML5新特性 HTML5新特性针对于以前的不足,增加了一些新的标签,新的表单,新的表单属性等。 1.新增语义化标签 新增的带有语义化的标签 二.CSS3新特性

    目录

    一.HTML5新特性

    1.新增语义化标签

    2.新增多媒体标签

    音频

    视频

     3.新增input类型

     4.新增表单属性

     二.CSS3新特性 

    1.新增选择器

    属性选择器

    结构伪类选择器

    伪元素选择器

    2.盒子模型border-box

    3.图片变模糊

    4.计算盒子宽度width:calc 函数

    5.过渡

    6.2D转换

    7.动画

    8.3D转换

    9.浏览器私有前缀


     广义和狭义的HTML5

    狭义的HTML5指HTML5中的标签

     广义的HTML5指的是

    一.HTML5新特性

    HTML5新特性针对于以前的不足,增加了一些新的标签,新的表单,新的表单属性等。

    1.新增语义化标签

     新增的带有语义化的标签

    2.新增多媒体标签

    方便嵌入音视频,不再需要用flash和其他浏览器插件

    音频

     

    视频

     

     3.新增input类型

     4.新增表单属性

      multiple用于type为file的表单,如果不用multiple,那么file表单只能选中本地的一个文件上传,使用multiple则可以在本地通过CTRL选中多个文件上传。

    修改placeholder里面的字体的颜色

     二.CSS3新特性 

    1.新增选择器

    属性选择器

    属性选择器可以根据元素的特定属性来选择元素,可以不借助于类或者id选择器。

    div[name],选中有name属性的div

    div[name="icon"],选中name值以icon开头的div

    注意

    类选择器,属性选择器,伪类选择器,权重都没10 

    结构伪类选择器

    根据文档结构来选择元素,常用于根据父级选择器选择里面的子元素。

    第一组

    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    
    
    
    ul:first-child{}   选择ul中第一个孩子
    
    ul li:first-child{}    选择ul中第一个叫li的孩子
    
    ul:nth-child(2){}    选中yl中第二个孩子
    
    
    
    

    对于E:nth-child(n),n可以是数字或者是关键字,公式。

    关键字:even 偶数   odd  奇数

    当括号中是n时,n会进行计算,从0开始一直加到最后,所以写n时就等价于选择了所有孩子。

    注意必须是n不能是其他的字母。

    除了n之外,还有其他的公式。

    第二组

    和第一组的区别

    <section>
        <p>1</p>
        <div>2</div>
        <div>3</div>
    </section>
    
    
    section div:nth-child(1){}    谁也没有选中,因为nth-child会把所有的孩子从上往下排序号,会先把p标签选出来,再去看:前面的选择器,发现选出来的标签不是div,不匹配,所以没有选中任何标签。
    
    
    
    section div:nth-of-type(1){}     选中第一个div,只把div标签拿出来排序。
    

    伪元素选择器

    伪元素选择器可以利用CSS创建新标签,不需要HTML标签,从而简化HTML结构。

     

    比如这个箭头就可以不再用一个大盒子组装了 ,可以在利用伪元素选择器前面一个元素后面添加标签。

    注意

     使用伪类选择器避免页面中的盒子太多。

    div::before{}

    div::after{}

    before和after都是一个盒子,而且都是div的孩子,before是放在div前面的孩子,after是放在div后面的孩子,如果div原先就有内容,那也不影响,before总是在最前面,after总是在最后面。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div{
                width: 200px;
                height: 200px;
                background-color: pink;
            }
            div::before{
                content: '我';
            }
            div::after{
                content: '小猪';
            }
        </style>
    </head>
    <body>
        <div>是</div>
    </body>
    </html>

     伪元素选择器的使用

    1.配合字体图标

    288

    2.仿土豆效果

    289

    3.伪元素清除浮动本质

    290

    2.盒子模型border-box

    设置了border-box,padding和border就不会改变盒子大小了。前提是border和padding相加不能超过指定的width和height

    3.图片变模糊

     

    4.计算盒子宽度width:calc 函数

     5.过渡

     

     鼠标经过谁给谁加

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <style>
            div{
                width: 200px;
                height: 200px;
                background-color: pink;
                /*变化的属性  花费时间  运动曲线  何时开始*/
                transition: width 1s;
            }
            div:hover{
                width: 400px;
            }
        </style>
    </head>
    <body>
    <div></div>
    </body>
    </html>

     如果想写多个属性,利用逗号进行分割。

    transition: width 1s,height 1s;
    
    
    也可以这样,会朝hover指定的方向变,hover指定了几个属性,all就变化多少个属性
    transition: all 1s;

    6.2D转换

     移动:translate

     

     translate的单位是百分比,比如盒子的大小是100px * 100px,translateX是50%,那么它会向右移动50px

     利用translate让盒子实现水平和垂直居中

    旋转:rotate

    顺时针或者逆时针转圈

    设置旋转中心点

    transform-origin

    设置元素转换的中心点

     left bottom就是左下角

    旋转小案例2

    361

    缩放:scale

     不影响其他盒子布局,要是用width和height来修改宽高会影响其他盒子的布局

    还可以通过transform-origin设置的缩放的中心点

    2D转换综合写法及顺序问题

            div{
                width: 200px;
                height: 200px;
                background-color: pink;
                transition: all 1s;
            }
            div:hover{
                transform: translate(50px,50px) rotate(180deg) scale(2,2);
            }

    7.动画

     之前学的过渡当鼠标经过或离开时才能动,而动画自己就可以动

    动画的使用步骤

    先定义动画,再使用动画

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            @keyframes walk {
                0%{
                    transform: translateX(0px);
                }
                100%{
                    transform: translateX(1000px);
                }
            }
            div{
                width: 200px;
                height: 200px;
                background-color: pink;
                animation-name: walk;
                animation-duration: 5s;
            }
        </style>
    </head>
    <body>
      <div></div>
    </body>
    </html>

    from相当于0%,to相当于100%

    CSS动画的属性

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            @keyframes walk {
                0%{
                    transform: translateX(0px);
                }
                25%{
                    transform: translateX(1200px);
                }
                50%{
    
                    transform: translate(1200px,400px);
                }
                75%{
                    transform: translate(0,400px)
                }
                100%{
                    transform: translateY(0);
                }
            }
            div{
                width: 200px;
                height: 200px;
                background-color: pink;
                /*动画名称*/
                animation-name: walk;
                /*持续时间*/
                animation-duration: 6s;
                /*运动曲线*/
                animation-timing-function: ease-in-out;
                /*规定动画何时开始*/
                animation-delay: 0s;
                /*规定动画播放次数,infinite 无限次数*/
                /*animation-iteration-count: infinite;*/
                /*是否反方向播放*/
                /*animation-direction: alternate;*/
                /*动画结束后状态,forwards 保持动画结束时的状态*/
                animation-fill-mode: forwards;
            /*    */
            }
            div:hover{
            /*    鼠标经过div停止动画,鼠标离开继续动画*/
                animation-play-state: paused;
            }
        </style>
    </head>
    <body>
      <div></div>
    </body>
    </html>

    速度曲线

     步长就是分几步到达最后的状态。

    用step实现打字机效果

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            @keyframes walk {
                0%{
                    width: 0;
                }
                100%{
                    width: 210px;
                }
            }
            div {
                overflow: hidden;
                white-space: nowrap;
                background-color: pink;
                animation-name: walk;
                animation-duration: 4s;
                animation-timing-function: steps(13);
                animation-fill-mode: forwards;
            }
        </style>
    </head>
    <body>
      <div>今天是个好日子啊啊啊啊啊啊</div>
    </body>
    </html>

    动画简写属性

     

    8.3D转换

    3D特点:近大远小

    3D移动

    3D移动在2D移动的基础上多了一个可移动的方向Z轴

    z轴一般不用百分比单位

    正值向外移动,会变大。

    透视 perspective

     

     眼睛   要看的东西  屏幕    要看的东西是要投到电脑屏上的

      perspective指的是眼睛与屏幕的距离

    perspective越小,看到的越大

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                perspective: 200px;
            }
            div {
                width: 100px;
                height: 100px;
                background-color: pink;
                transform: translate3d(400px,100px,100px);
            }
        </style>
    </head>
    <body>
      <div></div>
    </body>
    </html>

    perspective不能小于Z轴指定的大小,不然就看不到图像了。

    3D旋转

    3D旋转都需要指定透视距离,如果不添加透视距离,旋转效果不立体。

    透视的值越小,沿X轴旋转的效果越立体。

    沿Z轴旋转时,跟2D旋转的效果一样,看起来像在平面上。

     

    沿y轴旋转45度

     沿着X轴和Y轴的矢量旋转

    3D呈现

    transform-style

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
    
            }
            .box{
                position: relative;
                width: 200px;
                height: 200px;
                margin: 100px auto;
                perspective: 500px;
                transition: all 2s;
                transform-style: preserve-3d;
            }
    
            .box:hover{
                transform: rotateY(60deg);
            }
    
            .box div{
                /*让两个子盒子重叠,absolute不占位置*/
                position: absolute;
                top:0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: pink;
            }
    
            .box div:last-child{
                background-color: purple;
                transform: rotateX(60deg);
            }
        </style>
    </head>
    <body>
    <div class="box">
        <div></div>
        <div></div>
    </div>
    
    </body>
    </html>

    9.浏览器私有前缀


     

    展开全文
  • css3新特性.png

    2021-03-17 15:17:57
    CSS3新特性,带你一小时学完CSS3
  • CSS3新特性1

    2022-08-08 19:59:41
    CSS3新特性1
  • 主要介绍了Css3新特性应用之视觉效果实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。
  • 本篇文章主要介绍了Css3新特性应用之过渡与动画,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 本文分享一个利用CSS3制作三角形的示例,感兴趣的朋友可以参考一下。
  • CSS3新特性有哪些?

    千次阅读 2021-03-03 15:06:01
    一、css3选择器 E:nth-child(n) 选择器匹配其父元素的第n个子元素,不论元素类型,n可以使数字,关键字,或公式 E:nth-of-type(n) 选择与之其匹配的父元素的第N个子元素 E:frist-child 相对于父级做参考,“所有...

    一、css3的新选择器

    E:nth-child(n) 选择器匹配其父元素的第n个子元素,不论元素类型,n可以使数字,关键字,或公式

    E:nth-of-type(n) 选择与之其匹配的父元素的第N个子元素

    E:frist-child 相对于父级做参考,“所有”子元素的第一个子元素,并且“位置”要对应

    E:frist-of-type 相对于父级做参考,“特定类型”(E)的第一个子元素

    E:empty 选择没有子元素的每个E元素

    E:target 选择当前活动的E元素

    ::selection 选择被用户选取的元素部分

    属性选择器

    E[abc*="def"] 选择adc属性值中包含子串"def"的所有元素

    二、文本

    text-shadow:2px 2px 8px #000;参数1为向右的偏移量,参数2为向左的偏移量,参数3为渐变的像素,参数4为渐变的颜色

    text-overflow:规定当文本溢出包含元素时发生的事情 text-overflow:ellipsis(省略)

    text-wrap:规定文本换行的规则

    word-break 规定非中日韩文本的换行规则

    word-wrap:对长的不可分割的单词进行分割并换行到下一行

    white-space:规定如何处理元素中的空白
    white-space:nowrap 规定段落中的文本不进行换行

    三、边框

    border-raduis 边框的圆角

    border-image 边框图片

    .border-image {
        border-image-source:url(images/border.png);
        boder-image-slice:27;
        border-image-width:10px;
        border-iamge-repeat:round; (round平铺) 平铺效果不作用于四角,只适应与四边  
    }
    

    四、背景

    rgba

    backgrounnd-size:cover/contain,其中background-size:cover,会使“最大”边进行缩放,另一边同比缩放,铺满容器,超出部分会溢出。background-size:contain,会使“最小”边进行缩放,另一边同比缩放,不一定铺满容器,会完整显示图片

    五、渐变

    linear-gradient

    background-image:linear-gradient(90deg,yellow 20%,green 80%)
    

    radial-gradient

    background-iamge:radial-gradient(120px at center center,yellow,green)
    

    六、多列布局

    column-count

    column-width

    column-gap

    column-rule

    七、过渡

    transition

    transition-property:width //property为定义过渡的css属性列表,列表以逗号分隔

    transition-duration:2s; //过渡持续的时间

    transition-timing-function:ease;

    transition-delay:5s //过渡延迟5s进行

    八、动画、旋转

    animation

    transform :translate(x,y) rotate(deg) scale(x,y)

    translate

    scale

    rotate

    skew(倾斜)

    九、flex布局

    十、@media媒体查询

    展开全文
  • CSS3 新特性概述

    千次阅读 多人点赞 2020-11-28 12:47:30
    CSS3新特性大致分为以下六类 1.CSS3选择器2.CSS3边框与圆角3.CSS3背景与渐变4.CSS3过渡5.CSS3变换6.CSS3动画下面分别说一说以上六类都有哪些内容 CSS3选择器 1.基本选择器 基本选择器又分为 子选择器 相邻兄弟...
  • 浏览器关闭后数据不丢失 sessionStorage 的数据在浏览器关闭后自动删除 表单控件,calendar、date 、time、email、url、search 新的技术webworker,websocket,Geolocation CSS3新特性 颜色:新增RGBA、HSLA模块 文字...
  • 面试-html5,css3新特性

    千次阅读 2020-08-11 09:54:56
    1.新特性、 HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。 拖拽释放(Drag and drop) API 语义化更好的内容标签(header,nav,footer,aside,article,section) 音频、...
  • 本资源是基于html5 rocks作的CSS3介绍,是PPT风格的网页,本人做介绍用的,自己写了一些代码进去,大家可以参考。 HTML5 Rocks官网上有更丰富的关于HTML5+CSS3+JS的介绍,由于资源比较大,大家可以自己到官网下载。
  • 样式 背景 background-origin: 规定背景图片的定位区域。 ☞ padding-box 背景图像相对内边距定位(默认值) ☞ border-box 背景图像相对边框定位【以边框左上角为参照进行位置设置】 ☞ content-box 背景图像相对...
  • CSS3新特性详细介绍

    千次阅读 多人点赞 2020-03-14 23:40:20
    文章目录一、CSS3实现圆角 - border-radius二、盒子阴影 - box-shadow三、文本阴影 - text-shadow四、线性渐变 - gradient五、变化样式 - transformrotate - 旋转scale - 缩放translate - 定位skew - 倾斜六、增加了...
  • HTML5和CSS3新特性一览

    万次阅读 多人点赞 2017-04-04 20:53:05
    HTML5提供了的元素来创建更好的页面结构: 标签 描述 定义页面独立的内容区域。 定义页面的侧边栏内容。 允许您设置一段文本,使其脱离其父元素的文本方向设置。 定义命令按钮...
  • CSS进阶之CSS3新特性总结

    千次阅读 多人点赞 2020-11-10 00:13:15
    CSS3 文章目录CSS3前言一、开发商前缀二、静态样式2.1 Web字体2.2 背景background2.2.1 支持多背景2.2.2 各背景位置2.2.3 各背景的平铺方式2.3 渐变2.3.1 线性渐变 linear-gradient()2.3.2 径向渐变 radial-...
  • html5与css3新特性总结,希望帮助到大家,感兴趣的可以访问呢我的主页。HTML5 的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题,基本是 IE9+ 以上版本...
  • CSS3有哪些新特性

    千次阅读 2021-03-20 21:29:21
    CSS3新特性 1.CSS3CSS2.1的一个升级版,它是对CSS的一个扩展。 2.CSS3的主要新特性: 1)选择器 2)阴影 3)形状转换(2D <-> 3D) 4)变形 5)动画(过渡动画、帧动画) 6)边框 7)多重背景 8)反射 9)...
  • CSS3把很多以前需要使用图片和脚本来实现的效果,只需要短短几行代码就能搞定,接下来通过本文给大家介绍CSS3哪些新特性值得称赞,对css3新特征相关知识感兴趣的朋友一起学习吧
  • 关于CSS3新特性(面试经典)

    千次阅读 2021-07-27 16:36:53
    1.过渡属性 transition: 要改变的属性,花费时间,效果曲线(默认ease),延迟...3.圆角属性: CSS border-radius - 指定每个角 border-radius属性可以接受一到四个值。规则如下: 四个值 - border-radius: 15px...
  • CSS3新增了哪些新特性

    千次阅读 2022-03-15 10:18:10
    CSS3新增了哪些新特性? 一、是什么 css,即层叠样式表(Cascading Style Sheets)的简称,是一种标记语言,由浏览器解释执行用来使页面变得更美观 css3css的最新标准,是向后兼容的,CSS1/2的特性CSS3 里都是...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 226,413
精华内容 90,565
关键字:

css3新特性