说明:CSS3完全向后兼容,因此不必改变现有的设计。浏览器通常支持CSS2

CSS3模块

CSS3被划分为模块:

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

CSS3 边框

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

在文章中,您将学到一下边框属性

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

浏览器支持:

属性 浏览器支持
border-radius          
box-shadow          
border-image          

IE9+支持border-radius和box-shadow属性。

Firefox,Chrome以及Safari支持所有新的边框属性。

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

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

CSS3 圆角边框

        /*圆角边框*/
div {
width:300px;
height:50px;
border:2px solid black;
border-radius:25px;
text-align:center;
}

CSS3边框阴影

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

        div.shadowOne {
width: 200px;
height: 80px;
background-color: orange;
box-shadow: 10px 10px 5px #888888;
}

CSS3边框图片

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

 div.ImageOne {
border: 10px;
border-image: url(../Images/1.jpg) 30 30 round;
width: 200px;
height: 100px;
}

CSS3 边框的更多相关文章

  1. HTML 学习笔记 CSS3 (边框)

    CSS3边框 通过CSS3边框 你能够创建远角边框 向矩形边框添加阴影 使用图片来绘制边框 . CSS3的边框属性 主要包含以下几种 border-radius 边框圆角 box-shadow 边框阴 ...

  2. [HTML] CSS3 边框

    CSS3 边框 用CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如Photoshop. 在本章中,您将了解以下的边框属性: border-radius box-shado ...

  3. CSS3边框温故

    1.简介:border属性在CSS1中就已经定义了,用来设置元素边框风格,设置不同的边框.颜色.粗细 2.基本属性,包括三个类型值:(1)border-width:设置元素边框的粗细,默认3~4px( ...

  4. css3 边框记

    css3 边框 border属性在css1中就已经定义了,使用它可以设置元素的边框风格,边框颜色以及边框粗细. border-width:设置元素边框的粗细. border-color:设置元素边框的 ...

  5. 第八十节,CSS3边框图片效果

    CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一.属性解释     CSS3 ...

  6. css3边框与背景

    一.css3边框 1.border-image 边框 border-image: url(xxx.png) number stretch 很好理解就是拉伸,有多长拉多长. repeat (和4角上 同 ...

  7. 第95天:CSS3 边框、背景和文字效果

    1.CSS3边框: border-radius:CSS3圆角边框.在 CSS2 中添加圆角矩形需要技巧,我们必须为每个圆角使用不同的图片,在 CSS3 中,创建圆角是非常容易的,在 CSS3 中,bo ...

  8. CSS3 边框 圆角 背景

    CSS3用于控制网页的样式布局. CSS3是最新的CSS标准.   关于transform: transform:rotate(10deg);//顺时针方向旋转10° 浏览器支持情况:低版本的IE浏览 ...

  9. CSS3边框border-radius

    一.官方解释 设置或检索对象使用圆角边框.提供2个参数,2个参数以“/”分隔,每个参数允许设置1~4个参数值,第1个参数表示水平半径,第2个参数表示垂直半径,如第2个参数省略,则默认等于第1个参数. ...

随机推荐

  1. JQUERY1.9学习笔记 之基本过滤器(十二) 根元素选择器

    根元素选择器 描述:选择文档的根节点元素.jQuery( ":root" ) 例:显示文档根节点标签名. <!DOCTYPE html><html lang=&q ...

  2. php解析json数据

    <?php $data; $data.="["; for ($i=0;$i<20;$i++) { $data.="{"; $data.=" ...

  3. MongoDB-固定集合 capped collection 操作 介绍

    固定集合:capped collection 是性能出色的固定大小的集合,以LRU算法淘汰记录,自助维护集合中的对象的插入顺序,创建时预先制定大小,空间使用完,心对象取代旧的对象,保持最新的数据. 可 ...

  4. jquery easy ui 学习 (6) basic validatebox

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. bzoj2487: Super Poker II

    Description I have a set of super poker cards, consisting of an infinite number of cards. For each p ...

  6. python——os模块操作文件

  7. IOS笔记 1

    < ![CDATA[ 笔记 UIWindows 与UIView的关系iOS的坐标系统视图层次结构视图坐标(Frame和Bounds区别)UIView的常用属性和方法坐标系统的变换UIView内容 ...

  8. Web分析日志

    http://www.docin.com/p-649515490.html http://wenku.baidu.com/link?url=kB-83fbl1Zc3Y6U2BYLj-lKMWShe8Z ...

  9. COJN 0483 800501求最大非空子矩阵

    800501求最大非空子矩阵 难度级别:B: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 已知矩阵的大小定义为矩阵中所有元素的和.给定一个矩 ...

  10. POJ 1511 SPFA+邻接表 Invitation Cards

    题目大意: 计算从 1 点 到 其他所有点的 往返距离之和, 因为是 有向图, 所以我们需要将图反存 一次, 然后求两次单源最短路, 结果就出来了. #include <iostream> ...