• W3Cschool学习笔记——CSS3教程 殷的博客


    向 div 元素添加圆角:

    div
    {
    border:2px solid;
    border-radius:25px;
    -moz-border-radius:25px; /* Old Firefox */
    }
     
     
     
     
    在 CSS3 中,box-shadow 用于向方框添加阴影:
    div
    {
    box-shadow: 10px 10px 5px #888888;
    }
     
     
     
     
    通过 CSS3 的 border-image 属性,您可以使用图片来创建边框:
    div
    {
    border-image:url(border.png) 30 30 round;
    -moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
    -webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
    -o-border-image:url(border.png) 30 30 round; /* Opera */
    }
     
     
     
     
     
     

    CSS3 background-origin 属性

    background-origin 属性规定背景图片的定位区域。

    背景图片可以放置于 content-box、padding-box 或 border-box 区域。

    背景图片的定位区域

    div
    {
    background:url(bg_flower.gif);
    background-repeat:no-repeat;
    background-size:100% 100%;
    -webkit-background-origin:content-box; /* Safari */
    background-origin:content-box;
    }

     

     

     

     

    CSS3 文本阴影

    在 CSS3 中,text-shadow 可向文本应用阴影。

    文本阴影效果

    您能够规定水平阴影、垂直阴影、模糊距离,以及阴影的颜色:

    实例

    向标题添加阴影:

    h1
    {
    text-shadow: 5px 5px 5px #FF0000;
    }

     

     

     

     

     

     

    CSS3 自动换行

    单词太长的话就可能无法超出某个区域:

    This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

    在 CSS3 中,word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分:

    This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

    下面是 CSS 代码:

    实例

    允许对长单词进行拆分,并换行到下一行:

    p {word-wrap:break-word;}
     
     
     
     

    translate() 方法

    通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数:

    实例
    div
    {
    transform: translate(50px,100px);
    -ms-transform: translate(50px,100px);		/* IE 9 */
    -webkit-transform: translate(50px,100px);	/* Safari and Chrome */
    -o-transform: translate(50px,100px);		/* Opera */
    -moz-transform: translate(50px,100px);		/* Firefox */
    }
     
     
     
     
     
     
     

    rotate() 方法

    通过 rotate() 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。

    实例
    div
    {
    transform: rotate(30deg);
    -ms-transform: rotate(30deg);		/* IE 9 */
    -webkit-transform: rotate(30deg);	/* Safari and Chrome */
    -o-transform: rotate(30deg);		/* Opera */
    -moz-transform: rotate(30deg);		/* Firefox */
    }
  • 相关阅读:
    动态规划之最大子序和(53)
    退出系统
    请维护容差码的容差限制-OMR6
    SAP561该物料不可能有库存记帐
    虚拟机锁定文件失败,disk启动失败
    该物料不可能有库存记账
    其他收货入库
    有关业务 事件类型wa 在 的号码范围不存在
    给供应商付款
    T169V表目:不存在
  • 原文地址:https://www.cnblogs.com/yinzf/p/5308602.html
Copyright © 2020-2023  润新知