css3 常用。

发布时间:2020-07-31 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了css3 常用。脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

       

  • CSS3 边框

    通过 CSS3,您能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框 - 并且不需使用设计软件,比如 PhotoShop。

    在本章中,您将学到以下边框属性:

    • border-radius     圆角边框
    • box-shadow       边框阴影
    • border-image     边框插入图片  
      border-image:url(border.png) 30 30 round;

      CSS3 背景

      CSS3 包含多个新的背景属性,它们提供了对背景更强大的控制。

      在本章,您将学到以下背景属性:

      • background-size    背景图大小
      • background-origin   规定背景图片的定位区域。(背景图片可以放置于 content-box、padding-box 或 border-box 区域。)
      • 分享图片

         

      • background-clip   规定背景色的定位区域。(同上)

      您也将学到如何使用多重背景图片。

    • CSS3 文本效果

      CSS3 包含多个新的文本特性。

      在本章中,您将学到如下文本属性:

      • text-shadow  文本阴影
      • word-wrap   允许对长的不可分割的单词进行分割并换行到下一行。
      • hanging-punctuation 规定标点字符是否位于线框之外。  
        punctuation-trim 规定是否对标点字符进行修剪。  
        text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。  
        text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。  
        text-justify 规定当 text-align 设置为 "justify" 时所使用的对齐方法。  
        text-outline 规定文本的轮廓。  
        text-overflow 规定当文本溢出包含元素时发生的事情。

        CSS3 字体 @font-face 规则

        在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体。

        通过 CSS3,web 设计师可以使用他们喜欢的任意字体。

        当您您找到或购买到希望使用的字体时,可将该字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上。

        您“自己的”的字体是在 CSS3 @font-face 规则中定义的。

        实例

        <style> 
        @font-face
        {
        font-family: myFirstFont;
        src: url(‘Sansation_Light.ttf‘),url(‘Sansation_Light.eot‘); /* IE9+ */
        }
        
        div
        {
        font-family:myFirstFont;
        }
        </style>

        CSS3 2D转换

        通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。

      • 2D Transform 方法

      • matrix(n,n,n) 定义 2D 转换,使用六个值的矩阵。
        translate(x,y) 定义 2D 转换,沿着 X 和 Y 轴移动元素。
        translateX(n) 定义 2D 转换,沿着 X 轴移动元素。
        translateY(n) 定义 2D 转换,沿着 Y 轴移动元素。
        scale(x,y) 定义 2D 缩放转换,改变元素的宽度和高度。
        scaleX(n) 定义 2D 缩放转换,改变元素的宽度。
        scaleY(n) 定义 2D 缩放转换,改变元素的高度。
        rotate(angle) 定义 2D 旋转,在参数中规定角度。
        skew(x-angle,y-angle) 定义 2D 倾斜转换,沿着 X 和 Y 轴。
        skewX(angle) 定义 2D 倾斜转换,沿着 X 轴。
        skewY(angle) 定义 2D 倾斜转换,沿着 Y 轴。

        3D 转换

        CSS3 允许您使用 3D 转换来对元素进行格式化。

        在本章中,您将学到其中的一些 3D 转换方法:

        • rotateX()
        • rotateY()

        CSS3 过渡

        通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果

      • 属性 描述 CSS
        transition 简写属性,用于在一个属性中设置四个过渡属性。 3
        transition-property 规定应用过渡的 CSS 属性的名称。 3
        transition-duration 定义过渡效果花费的时间。默认是 0。 3
        transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 3
        transition-delay 规定过渡效果何时开始。默认是 0。 3

        

实例

在一个例子中使用所有过渡属性:

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari 和 Chrome */ -webkit-transition-property:width; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; -webkit-transition-delay:2s; /* Opera */ -o-transition-property:width; -o-transition-duration:1s; -o-transition-timing-function:linear; -o-transition-delay:2s; }

总结

以上是脚本之家为你收集整理的css3 常用。全部内容,希望文章能够帮你解决css3 常用。所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入脚本之家官方QQ群:1065694478