CSS3边框 通过CSS3边框 你能够创建远角边框 向矩形边框添加阴影 使用图片来绘制边框 。

CSS3的边框属性 主要包含以下几种

border-radius 边框圆角

box-shadow 边框阴影

border-image 用图片绘制边框

CSS3圆角边框例子：

在 CSS2 中添加圆角矩形需要技巧。我们必须为每个圆角使用不同的图片。
在 CSS3 中，创建圆角是非常容易的。
在 CSS3 中，border-radius 属性用于创建圆角

  1. <html>
  2.     <head>
  3.         <meta charset="UTF-8">
  4.         <style type="text/css">
  5.             #radius {
  6.                 border: 1px solid orange;
  7.                 text-align: center;
  8.                 -webkit-border-radius: 8px;
  9.                 -moz-border-radius: 8px;
  10.                 /*还可以设置具体的某个角的属性*/
  11.                 /*-moz-border-radius-bottomleft: ;
  12.                 -moz-border-radius-topleft: ;
  13.                 -moz-border-radius-topright: ;
  14.                 -moz-border-radius-topleft: ;*/
  15.                 border-style: ridge;
  16.                 /*设置下边框的颜色*/
  17.                 -webkit-border-after-color: blue;
  18.                 /*设置上边框的颜色*/
  19.                 -webkit-border-before-color: red;
  20.             }
  21.         </style>
  22.  
  23.     </head>
  24.     <body>
  25.         <div id="radius">
  26.             为矩形设置圆角
  27.         </div>
  28.     </body>
  29. </html>

效果：

CSS3阴影效果

在CSS3中我们使用box-shadow属性来完成

先看一下box-shadow 的语法

  1. E {box-shadow: <length> <length> <length>?<length>?||<color>}
  2. 也就是：
  3. E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}
  4. 换句说：
  5. 对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}

box-shadow属性至多有6个参数设置，他们分别取值：

阴影类型：此参数是一个可选值 如果不设置 默认的投影方式是 外阴影 如果取唯一值 insert  就是将外阴影变成内阴影 也就是说设置阴影类型为“inset”时，其投影就是内阴影；

x-offset 是指阴影水平偏移量其值可以是正负值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边；

y-offset 是指阴影的垂直偏移量 其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部

阴影模糊半径：此参数是可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小

阴影颜色：此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。

浏览器 兼容

我们这里还涉及到一个各浏览器前缀的问题，比如说Mozilla内核的-moz，webkit内核的-webkit。经测试在最新版的Firefox和Google Chrome浏览器都无需加上前缀，但在safari中还是需要前缘的，为了能兼容支持的各大浏览器，我们在书写box-shadow的格式应该这样

  1. //Firefox4.0-
  2. -moz-box-shadow: 投影方式 x轴偏移量 y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
  3. //Safari and Google chrome10.0-
  4. -webkit-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
  5. //Firefox4.0+ 、 Google chrome 10.0+ 、 Oprea10.5+ and IE9
  6. box-shadow:  投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;

实例：

  1. <html>
  2.     <head>
  3.         <meta charset="UTF-8">
  4.         <style type="text/css">
  5.             .outer {
  6.                 width: 100px;
  7.                 height: 100px;
  8.                 border: 1px solid #CCCCCC;
  9.             }
  10.             .inter {
  11.                 width: 60px;
  12.                 height: 60px;
  13.                 background: burlywood;
  14.                 margin: 10px auto;
  15.                 -webkit-box-shadow: 50px 50px 0px green;
  16.                 -moz-box-shadow: 50px 50px green;
  17.                    box-shadow: 50px 50px green;
  18.             }
  19.         </style>
  20.  
  21.     </head>
  22.     <body>
  23.         <div class="outer">
  24.             <div class="inter">
  25.             </div>
  26.         </div>
  27.     </body>
  28. </html>

效果：

可以看到 阴影多出来的阴影会撑破容器跑出来。标准里有一张图，描述了box-shadow的工作方式，这张图直观告诉我们如何使用box-shadow

这张图可以告诉我们很多信息，比如说borer-radius圆角，阴影扩展、阴影模糊以及padding是如何影响对象阴影的：非零值的border-radius将会以相同的作用影响阴影的外形，但border-image不会影响对象阴影的任何外形；对象阴影同box模型的层次一样，外阴影会在对象背景之下，内阴影会在边框之下背景之上。所以整个层级就是：边框>内阴影>背景图片>背景颜色>外阴影。因为大家都知道，我们的背景图片是在背景颜色之上的。

如果只给其中的一边设计阴影 我们可以通过调整 x轴偏移量 和 y轴的便宜量来实现

例子：

  1. <html>
  2.     <head>
  3.         <meta charset="UTF-8">
  4.         <style type="text/css">
  5.             .outer {
  6.                 width: 100px;
  7.                 height: 100px;
  8.                 border: 1px solid #CCCCCC;
  9.             }
  10.             .inter {
  11.                 width: 60px;
  12.                 height: 60px;
  13.                 background: burlywood;
  14.                 margin: 10px auto;
  15.                 /*只设置右边框的阴影 和左边框的阴影 可以看到只调整了x轴的偏移量 同样的道理 可以设置上下边框的阴影*/
  16.                 /*如果同时设置多个阴影 中间用逗号隔开*/
  17.                 -webkit-box-shadow: 5px 0px 0px green , -5px 0px 0px darkgray;
  18.                 -moz-box-shadow: 0px 0px green , -5px 0px 0px darkgray;
  19.                    box-shadow: 5px 0px green, -5px 0px 0px darkgray;
  20.                }
  21.         </style>
  22.  
  23.     </head>
  24.     <body>
  25.         <div class="outer">
  26.             <div class="inter">
  27.             </div>
  28.         </div>
  29.     </body>
  30. </html>

效果

CSS3 边框图片

通过CSS3的 border-image 属性 可以设置使用图片来创建边框。

border-image 的浏览器兼容情况

我们对CSS2中的background比较熟悉 例如 我们可能对于CSS2中的background属性比较熟悉，例如：background:url(xx.jpg) 27px no-repeat;

指代的是图片(url(xx.jpg))，位置(27px)，重复性(no-repeat)。

border-image与此类似 border-image包括图片 剪裁位置（与background位置一样，也是数值，也支持百分值 重复性 例如:border-image:url(border.jpg) 27 repeat;

指的就是图片(url(border.png))，剪裁位置(27)，重复方式(repeat)

实例：

  1. .border_image{
  2.     width:400px;
  3.     height:100px;
  4.     border: 1em double orange;
  5.     -webkit-border-image:url(../image/border.png) 27;
  6.     border-image:url(../image/border.png) 27;
  7. }

HTML 学习笔记 CSS3 (边框)的更多相关文章

  1. css3学习笔记之边框

    CSS3 圆角 border-radius 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!DOCTYPE html> <h ...

  2. HTML 学习笔记 CSS3(Animation)

    CSS3动画: 通过CSS3 我们能够创建动画 这可以在许多网页中取代动画图片 Flash动画 以及JavaScript. CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 ...

  3. HTML 学习笔记 CSS3(过度 transition)

    通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果.请把鼠标移动到下面的元素上: 先看一下这个代码 实现旋转放大的效 ...

  4. HTML 学习笔记 CSS3 (背景)

    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在CSS3里面 你可以在一个标签元素里应用多个 ...

  5. CSS学习笔记----CSS3自定义字体图标

    响应式网页字体图标 作者:大漠 日期:2014-01-28 点击:3220 @font-face Responsive 本文由大漠根据Jason的<Responsive Webfont Icon ...

  6. [CSS3] 学习笔记-CSS3盒子样式

    1.盒子的类型 在CSS3中,使用display来定义盒子的类型,包括block,inline,inline-block类型.div元素和P元素,属于block类型,span元素和a元素,属于inli ...

  7. W3Cschool学习笔记——CSS3教程

    向 div 元素添加圆角: div { border:2px solid; border-radius:25px; -moz-border-radius:25px; /* Old Firefox */ ...

  8. 前端学习笔记--CSS3

    本本记录了css3的样式:浏览器支持度.圆角边框.阴影.文字与文本.过渡.动画.2d旋转.3d旋转 浏览器支持度: 1.圆角边框 例:只要确定了x.y值,就能知道弧度 画一个圆形:长=宽,border ...

  9. HTML 学习笔记 CSS3 (多列)

    CSS3多列 通过CSS3 我们能够创建多个列来对文本进行布局. 在这篇文章中 你将了解到如下多列属性: column-count column-gap column-rule 浏览器支持: 多列的属 ...

随机推荐

  1. JavaScript学习11 数组排序实例

    JavaScript学习11 数组排序实例 数组声明 关于数组对象的声明,以前说过:http://www.cnblogs.com/mengdd/p/3680649.html 数组声明的一种方式: va ...

  2. Android Actitity的生命周期

    新建项目,MainActivity代码如下: package com.wuyudong.lifecycle; import android.os.Bundle; import android.app. ...

  3. C语言实现泛型编程

    泛型编程让你编写完全一般化并可重复使用的算法,其效率与针对某特定数据类型而设计的算法相同.在C语言中,可以通过一些手段实现这样的泛型编程.这里介绍一种方法——通过无类型指针void* 看下面的一个实现 ...

  4. Android实用代码七段（四）

    声明 欢迎转载,但请保留文章原始出处:) 博客园:http://www.cnblogs.com 农民伯伯: http://over140.cnblogs.com 正文 1.发送不重复的通知(Notif ...

  5. 【Android】OPlayer升级Vitamio到4.1

    前言 很久没有更新OPlayer,还是使用旧版Vitamio 3.0版本(新版已经到4.1),这次更新下. 声明 欢迎转载,但请保留文章原始出处:)  博客园:http://www.cnblogs.c ...

  6. SSH 框架

    SSH是 struts+spring+hibernate的一个集成框架,是目前较流行的一种web应用程序开源框架.是把多个框架(Struts.Spring以及Hibernate)紧密的结合在一起,用于 ...

  7. Java Gradle入门指南之gretty插件（安装、命令与核心特性）

        Java Web应用开发时常使用Gradle来进行项目管理,可以十分便利地解决包依赖等问题.war插件的出现,让项目部署成为一个复制粘贴的过程,那有没有办法让Java web应用的部署,就像w ...

  8. linux下svn命令使用大全(share)

     转自:http://blog.chinaunix.net/uid-22566367-id-1965771.html 1.将文件checkout到本地目录 svn checkout path(path ...

  9. CMPP3.0实现物联网卡通讯

    当下物联网发展迅猛,物联网卡可以接受短信指令,实现千里之外尽可掌控.本人做过一个这类项目,把相关经验记录下来,分享给需要的人. 物联网卡通讯其实跟电话卡一样,可以使用CMPP协议.不过由于物联网卡位数 ...

  10. SQL Server 中的逻辑读与物理读

    首先要理解逻辑读和物理读: 预读:用估计信息,去硬盘读取数据到缓存.预读100次,也就是估计将要从硬盘中读取了100页数据到缓存. 物理读:查询计划生成好以后,如果缓存缺少所需要的数据,让缓存再次去读 ...