zoukankan      html  css  js  c++  java
  • CSS3

    CSS3 模块

    CSS3 被划分为模块。

    其中最重要的 CSS3 模块包括:

    • 选择器
    • 框模型
    • 背景和边框
    • 文本效果
    • 2D/3D 转换
    • 动画
    • 多列布局
    • 用户界面

    CSS3 边框

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

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

    • border-radius
    • box-shadow
    • border-image

    浏览器支持

    Firefox、Chrome 以及 Safari 支持所有新的边框属性。Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。

    注释:对于 border-image,Safari 5 以及更老的版本需要前缀 -webkit-。

    Opera 支持 border-radius 和 box-shadow 属性,但是对于 border-image 需要前缀 -o-。

    CSS3 圆角边框

    在 CSS2 中添加圆角矩形需要技巧。我们必须为每个圆角使用不同的图片。

    在 CSS3 中,创建圆角是非常容易的。

    在 CSS3 中,border-radius 属性用于创建圆角:

    实例

    向 div 元素添加圆角:

    div
    {
    border:2px solid;
    border-radius:25px;
    -moz-border-radius:25px; /* Old Firefox */
    }


    CSS3 边框阴影

    在 CSS3 中,box-shadow 用于向方框添加阴影:

    实例

    向 div 元素添加方框阴影:

    div
    {
    box-shadow: 10px 10px 5px #888888;
    }


    CSS3 边框图片

    通过 CSS3 的 border-image 属性,您可以使用图片来创建边框:

    实例

    使用图片创建围绕 div 元素的边框:

    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 */
    }
  • 相关阅读:
    Mybatis 使用 mapper 接口规范的 一对一, 一对多,多对多映射
    mybatis mapper接口开发dao层
    使用 maven 搭建web开发基本架构
    mybatis dao 层开发简易版 非整合 spring
    mybatis 不整合spring 入门小例子
    spring+spring mvc+JdbcTemplate 入门小例子
    PythonCharm 配置本地反向代理激活
    Python 算法实现
    不写一行代码,绿色三层我也行
    pythonday
  • 原文地址:https://www.cnblogs.com/love-Z/p/4235383.html
Copyright © 2011-2022 走看看