css3 边框记
css3 边框
border属性在css1中就已经定义了，使用它可以设置元素的边框风格，边框颜色以及边框粗细。
border-width:设置元素边框的粗细。
border-color:设置元素边框的颜色。
border-style:设置元素边框的类型。
在实际运用中可以将上面3个属性合并起来，简写为：
border:border-width border-color border-style;
还可以为不同的边设置不同的样式，其规则遵循上右下左循序。
因为border-width与border-color有默认的样式，可以省略，但是border-style一定要写，否则不会显示边框样式,常用的有实线“solid”，虚线“dashed”，点状线“dotted”等。
border-color
border-color属性在css3增强了，它可以为元素边框设置更多的颜色。
border-color:[<color> | transparent{1,4} | inherit
border-color的语法看上去和css1中的完全相同，如果使用border-color这种缩写语法，将不会有任何效果，必须将这个border-color标准写法拆成四个边框，使用多种颜色才行。
border-top-colors:[<color> | transparent{1,4} | inherit
border-left-colors:[<color> | transparent{1,4} | inherit
border-bottom-colors:[<color> | transparent{1,4} | inherit
border-left-colors:[<color> | transparent{1,4} | inherit
注意：color是负数colors。
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
width:100px;
height:100px;
border:10px solid;
-moz-border-top-colors:red yellow blue green red yellow blue green red yellow;
-moz-border-right-colors:red yellow blue green red yellow blue green red yellow;
-moz-border-bottom-colors:red yellow blue green red yellow blue green red yellow;
-moz-border-left-colors:red yellow blue green red yellow blue green red yellow;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
border-color属性的参数其实很简单，就是颜色值。当border-color只设置一个颜色值时，效果和css1中的border-color一样。只有设置了n个颜色值，并且边框宽度也为n像素，就可以使用css3的border-color属性设置n个颜色，每种颜色显示1像素的宽度，如果宽度值大于颜色数量的值，最后一种颜色用于显示剩下的宽度。
border-image
css3增添了一个图片边框(border-image)的属性，能够模拟出background-image属性的功能。
border-image:none | <image> [<number> | <percentage>]{1,4} [/ <border-width>{1,4}]? [stretch | repeat | round]{0,2}
为了简单理解，俺们把上面属性分解为四个子属性(在实际中必须按照标准玩)。它们分别是：
引入背景图片：border-image-soure
切割引入背景图片：border-image-slice
边框背景图片的宽度：border-image-width
边框背景图片的排列方式：border-image-repeat
border-image-source
border-image-source:url(image url)
border-image-source跟background-image属性相似，也是 通过url()来调用背景图片，图片的路径可以是相对地址，也可以是绝对地址，默认值是none。
border-image-slice
border-image-slice:[<number> | <percentage>]{1,4} && fill ?
border-image-slice是用来分解引入进来的背景图片。
取值支持像素与百分比，其中像素不需要添加单位，因为默认单位就是像素，百分比即相对于边框背景图片而言的，例如边框图片的大小是300px X 240px,取百分比为25%，30%，15%，20%，他们实际对应的效果就是剪切了(从外到里)图片的60px,90px,36px,60px四边的大小(遵循上右下左循序）。fill从字面上说就是填充的意思，如果使用这个关键词时，图片边界的中间部分将保留下来。默认情况为空。
border-image-width
border-image-width:[<length> | <percentage> | <number> | auto]{1,4}
用来设置边框背景图片的显示大小，理解为border-width来用。
border-image-repeat
border-image-repeat:[stretch | repeat | round]{1,2}
用来指定边框背景图片的排列方式，stretch拉伸，repeat重复，round平铺，其默认值为stretch。它最多只接受两个参数值，第一个值表示水平方向的排列方式，第二个值表示垂直方向的排列方式。当取一个值时，表示水平和垂直方向的排列方式相同。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
width:200px;
height:200px;
/*剪切了图片四个方向各27px，并设置边框大小为27px，水平方向平铺，垂直方向拉伸*/
-moz-border-image:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2d_gVdFXXXXcLXXXXXXXXXXXX_!!2406102577.png) 27 27 27 27/27px round stretch;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
border-radius
css3专门针对元素的圆角效果增加了一个圆角属性border-radius。
border-radius:none | <length> {1,4}[/<length>{1,4}] ?
border-radius是一种缩写方法。如果设置反斜杠符号“/”，则反斜杠前面的值是元素圆角的水平方向半径，后面的是垂直方向半径，如果省略，则水平与垂直半径一样。
none:默认值，表示元素没有圆角。
<length>:由浮点数字和单位标识符组成的长度值。不可以是负值。
注意:如要要重置元素没有圆角，取值none并无效果，需要将值设为0。
border-radius可以将各个角单独拆分出来。
/*定义元素左上角圆角*/
border-top-left-radius:<length>/<length>
/*定义元素右上角圆角*/
border-top-right-radius:<length>/<length>
/*定义元素右下角圆角*/
border-bottom-right-radius:<length>/<length>
/*定义元素左下角圆角*/
border-bottom-left-radius:<length>/<length>
圆
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
width:100px;
height:100px;
background:#808080;
/*半径是宽度的一半*/
border-radius:50%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
半圆
div{
width:100px;
height:50px;
background:#808080;
/*定义左上角与右上角的半径为宽度的一半*/
border-radius:50px 50px 0 0;
}
扇形
div{
/*宽高半径一样，只设置一边*/
width:100px;
height:100px;
background:#808080;
border-radius:100px 0 0 0;
}
椭圆
div{
width:100px;
height:50px;
background:#808080;
/*水平半径等于宽，垂直半径等于高*/
border-radius:100px/50px;
}
box-shadow
box-shadow也是css3新增的一个重要属性，用来定义元素的盒子阴影。
box-shadow:none | [<length> <length> <length>?<length>? || <color>] [,<length> <length> <length>?<length>? || <color>]+
可以简写为：
box-shadow:none | [inset x-offset y-offset blur-radius spread-radius color],[inset x-offset y-offset blur-radius spread-radius color]
box-shadow属性可以使用一个或多个投影，中间用逗号“，”隔开。
none:默认值，元素没有任何阴影效果。
inset:阴影类型，可选值。如果不设置，默认的投影方式是外阴影，如果设置为inset，就是投影为内阴影。
x-offset:阴影水平偏移量，其值可以是正负值。如果取正值，则阴影在元素的右边；如果取负值，则阴影在元素的左边。
y-offset:阴影垂直偏移量，其值可以是正负值。如果取正值，则阴影在元素的下边；如果取负值，则阴影在元素的上边。
blur-radius:阴影模糊半径，可选参数。只能为正值，如果取值为0，表示阴影不具有模糊效果，值越大，阴影的边缘越模糊。
spread-radius:阴影扩展半径，可选参数。其值可以是正负值，如果取值为正值，则整个阴影都扩大，负值缩小。
color:阴影颜色，可选参数，如果不设定任何颜色，浏览器会取默认色。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
width:100px;
height:50px;
border:1px solid #808080;
border-radius:10px;
/*水平与垂直偏移量为正值，阴影在元素右边与下边，黑色*/
box-shadow:2px 2px 0 0 black;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
阴影太浓，我们添加阴影模糊半径。
div{
width:100px;
height:50px;
border:1px solid #808080;
border-radius:10px;
box-shadow:2px 2px 5px 0 black;
}
阴影模糊半径不只模糊了阴影边缘，整个元素都笼罩在阴影模糊半径之下，我们再添加阴影扩展半径，设置负值，使模糊半径缩小。
div{
width:100px;
height:50px;
border:1px solid #808080;
border-radius:10px;
box-shadow:2px 2px 5px -3px black;
}
只设置模糊半径与颜色。
div{
width:100px;
height:50px;
border:1px solid #808080;
border-radius:10px;
box-shadow:0 0 10px 0 red;
}
只设置扩展半径与颜色。
div{
width:100px;
height:50px;
border:1px solid #808080;
border-radius:10px;
box-shadow:0 0 0 3px red;
}
扩展半径类似边框效果，但不同的是，阴影并不在文档流中，所以不会改变布局。阴影可以设置多个，因此我们可以借助阴影扩展半径制作类似多边框颜色的效果。
div{
width:100px;
height:50px;
border:1px solid #808080;
border-radius:10px;
box-shadow:0 0 0 3px red,
0 0 0 6px yellow,
0 0 0 9px blue,
0 0 0 12px green;
}
内阴影效果
div{
width:100px;
height:50px;
border:1px solid #808080;
border-radius:10px;
box-shadow:inset 2px 2px 2px 0 black;
}
内阴影的阴影方向与外阴影的阴影方向相反，内阴影水平偏移量取正值时在左边，负值时在右边，垂直偏移量取正值时在上边，负值时在下边。
多层阴影效果
div{
width:100px;
height:50px;
border:1px solid #808080;
border-radius:10px;
box-shadow:2px 2px 2px red,
4px 4px 2px yellow,
6px 6px 2px blue,
8px 8px 2px green;
}
css3边框完，然个中奥妙，却不止
css3 边框记的更多相关文章
- HTML 学习笔记 CSS3 (边框)
CSS3边框 通过CSS3边框 你能够创建远角边框 向矩形边框添加阴影 使用图片来绘制边框 . CSS3的边框属性 主要包含以下几种 border-radius 边框圆角 box-shadow 边框阴 ...
- [HTML] CSS3 边框
CSS3 边框 用CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如Photoshop. 在本章中,您将了解以下的边框属性: border-radius box-shado ...
- CSS3边框温故
1.简介:border属性在CSS1中就已经定义了,用来设置元素边框风格,设置不同的边框.颜色.粗细 2.基本属性,包括三个类型值:(1)border-width:设置元素边框的粗细,默认3~4px( ...
- CSS3 边框
说明:CSS3完全向后兼容,因此不必改变现有的设计.浏览器通常支持CSS2 CSS3模块 CSS3被划分为模块: 选择器 框模型 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面 CS ...
- 第八十节，CSS3边框图片效果
CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一．属性解释 CSS3 ...
- css3边框与背景
一.css3边框 1.border-image 边框 border-image: url(xxx.png) number stretch 很好理解就是拉伸,有多长拉多长. repeat (和4角上 同 ...
- 第95天：CSS3 边框、背景和文字效果
1.CSS3边框: border-radius:CSS3圆角边框.在 CSS2 中添加圆角矩形需要技巧,我们必须为每个圆角使用不同的图片,在 CSS3 中,创建圆角是非常容易的,在 CSS3 中,bo ...
- CSS3 边框 圆角 背景
CSS3用于控制网页的样式布局. CSS3是最新的CSS标准. 关于transform: transform:rotate(10deg);//顺时针方向旋转10° 浏览器支持情况:低版本的IE浏览 ...
- CSS3边框border-radius
一.官方解释 设置或检索对象使用圆角边框.提供2个参数,2个参数以“/”分隔,每个参数允许设置1~4个参数值,第1个参数表示水平半径,第2个参数表示垂直半径,如第2个参数省略,则默认等于第1个参数. ...
随机推荐
- AutoCAD.NET二次开发：创建自定义菜单的两种方法比较
目前我已经掌握的创建CAD菜单方法有两种: COM方式: http://www.cnblogs.com/bomb12138/p/3607929.html CUI方式: http://www.cnblo ...
- [iOS基础控件 - 6.12.3] @property属性 strong weak copy
A.概念 @property 的修饰词 strong: 强指针/强引用(iOS6及之前是retain) weak: 弱智真/弱引用(iOS6及之前是assign) 默认情况所有指针都是强指针 ...
- HDU 5754 Life Winner Bo (找规律and博弈)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5754 给你四种棋子,棋子一开始在(1,1)点,两个人B和G轮流按每种棋子的规则挪动棋子,棋子只能往右下 ...
- CodeForces 707C Pythagorean Triples (数论)
题意:给定一个数n,问你其他两边,能够组成直角三角形. 析:这是一个数论题. 如果 n 是奇数,那么那两边就是 (n*n-1)/2 和 (n*n+1)/2. 如果 n 是偶数,那么那两边就是 (n/2 ...
- SQL大数据查询分页存储过程
最后一页分页一卡死,整个网站的性能都会非常明显的下降,不知道为啥,微软有这个BUG一直没处理好.希望SQL2012里不要有这个问题就好了. 参考代码如下: -- =================== ...
- java 搭建webservice服务+testclient測试
整理别人的日志: 一.什么是webservice 一种构建应用程序的普遍模型,能够在不论什么支持网络通信的操作系统中执行.一种新的web应用程序分支,能够公布.定位通过web调用.它是一个应用组件,为 ...
- 常见AutoCAD病毒(acad.fas、acad.lsp)清除方法
常见AutoCAD病毒(acad.fas.acad.lsp)清除方法 acad.fas.acad.lsp这两种病毒是最常见的CAD病毒了,而且往往同一时候出现.因为其本身对系统并不具备危害性,不过恶作 ...
- Android - 软件自动更新的实现
转自:http://blog.csdn.net/wwj_748/article/details/8195565 接触到一个很实用的技术,那就是软件自动更新.一般开发者是通过自行在应用平台添加更新版本的 ...
- windows 下的命令行工具。。
1.powershell window自带..右下角搜索..powershell 2.conemu https://code.google.com/p/conemu-maximus5/wiki/Dow ...
- 调用AutoCAD的内置对话框
如何将CAD的内置对话框(如style命令所用的文字样式对话框)作为当前对话框的子对话框调出? 常用的几个对话框对应的函数为:1.尺寸标注样式编辑对话框:int acedEditDimstyleInt ...