边框样式

点线式边框
破折线式边框
直线式边框
双线式边框
槽线式边框
脊线式边框
内嵌效果的边框
突起效果的边框
<div style="width: 300px; height: 50px; border-style: dotted;">点线式边框</div>

<p>&nbsp;</p>

<div style="width: 300px; height: 50px; border-style: dashed;">破折线式边框</div>

<p>&nbsp;</p>

<div style="width: 300px; height: 50px; border-style: solid;">直线式边框</div>

<p>&nbsp;</p>

<div style="width: 300px; height: 50px; border-style: double;">双线式边框</div>

<p>&nbsp;</p>

<div style="width: 300px; height: 50px; border-style: groove;">槽线式边框</div>

<p>&nbsp;</p>

<div style="width: 300px; height: 50px; border-style: ridge;">脊线式边框</div>

<p>&nbsp;</p>

<div style="width: 300px; height: 50px; border-style: inset;">内嵌效果的边框</div>

<p>&nbsp;</p>

<div style="width: 300px; height: 50px; border-style: outset;">突起效果的边框</div>

边框配色

border:1px solid #96c2f1;background:#eff7ff
border:1px solid #9bdf70;background:#f0fbeb
border:1px solid #bbe1f1;background:#eefaff
border:1px solid #cceff5;background:#fafcfd
border:1px solid #ffcc00;background:#fffff7
border:1px solid #cee3e9;background:#f1f7f9
border:1px solid #a9c9e2;background:#e8f5fe
border:1px solid #e3e197;background:#ffffdd
border:1px solid #adcd3c;background:#f2fddb
border:1px solid #bfd1eb;background:#f3faff
border:1px solid #a5b6c8;background:#eef3f7

边框阴影

 
<div style="width: 300px; height: 100px; background-color: #ff9900;

-webkit-box-shadow:10px 10px 5px #888888; /*老的For Chrome5+, Safari5+*/

-moz-box-shadow: 10px 10px 5px #888888; /* 老的 firefox */

box-shadow: 10px 10px 5px #888888;">&nbsp;</div>

边框阴影语法：

原点左侧为x轴负方向，值为负，右侧为正；原点下方为y轴正方向，值为正，上方为负。

  内阴影          外阴影

box-shadow: h-shadow v-shadow blur spread color inset;

-webkit-box-shadow是 For Chrome5+, Safari5+；

-moz-box-shadow 是 For Firefox3.6+ ；

box-shadow是最新版的浏览器均适用。

h-shadow：水平阴影的位置。允许负值。v-shadow：垂直阴影的位置。允许负值。blur：模糊距离（只能为正值）。

spread：阴影的尺寸。color：阴影的颜色。 inset：将外部阴影 (outset) 改为内部阴影。

边框圆角

利用border-radius 属性向元素添加圆角。
<html>

<head>

<style>

div

{

text-align:center;

border:2px solid #a1a1a1;

padding:10px 40px;

background:#dddddd;

width:350px;

border-radius:25px;

-moz-border-radius:25px; /* 老的 Firefox */

}

</style>

</head>

<body>

<div>利用border-radius 属性向元素添加圆角。</div>

</body>

</html>

border-radius:3px 4px 5px 6px
代表设置对象左上角3px圆角、右上角4px圆角、右下角5px圆角、左下角6px圆角。

因为CSS3相当于属于CSS2补充，IE9以下浏览器不兼容，也就是（IE6-IE8）低版本浏览器下即使设置了CSS3圆角样式也不会显示。不过你设置了不用顾问低版本浏览器。比如直到今天（2014年5月6日前）淘宝聚划算也使用圆角样式，在IE9以上浏览器能看到圆角样式，低版本依然是直角效果。

用图片做边框

在这里，图片铺满整个边框。
<style>

div

{

border:15px solid transparent;

width:300px;

padding:10px 20px;

}

#round

{

-moz-border-image:url(http://blog.xinlvtian.com/style/images/weixin.png) 15 15 15 15 repeat;    /* Old Firefox */

-webkit-border-image:url(http://blog.xinlvtian.com/style/images/weixin.png) 15 15 15 15 repeat;    /* Safari and Chrome */

-o-border-image:url(http://blog.xinlvtian.com/style/images/weixin.png) 15 15 15 15 repeat;    /* Opera */

border-image:url(http://blog.xinlvtian.com/style/images/weixin.png) 15 15 15 15 repeat;

}
</style>

<div id="round"><span style="font-size: 16px;">在这里，图片铺满整个边框。</span></div>

这是做边框用的图片   

兼容性：

<number>：number是一个数值，用来设置边框的宽度，其单位是px，其实就像border-width一样取值，可以使用1~4个值，其具体表示四个方位的值，大家可以参考border-width的设置方式；


其中number是没有单位的，专指像素px，因为其默认的单位就是像素px，所以在使用number时不需要加上单位，如果加上了单位反而是错误的写法。


<percntage>：percntage也是用来设置边框的宽度，跟number不同之处是，其使用的是百分比值来设置边框宽度；


stretch,repeat,round:用来设置边框背景图片的铺放方式，类似于background-position，其中stretch是拉伸（默认值），repeat是重复，round是平铺。

参考： border-image:<‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’>] || <‘border-image-repeat’>

border-image-slice（用来分解引入进来的背景图片）

percentage百分比值来表示，百分比的值是相对于边框背景图片而言的，例如边框图片的大小是300px*240px,我们取百分比为25% 30% 15% 20%，那么它们实际对应的效果就
是剪切了图片的60px 90px 36px 60px的四边大小。（如下图）

如上图所示:border-image-slice中的number或者percentage都可取1~4个值，也是遵从top,right,bottom,left的规则。

border-image-slice:fill；从字面上说是就是填充，如果使用这个关键字时，图片边界的中间部分将保留下来。默认情况下是为空的。

css边框样式、边框配色、边框阴影、边框圆角、图片边框的更多相关文章

  1. （一一九）通过CALayer实现阴影、圆角、边框和3D变换

    在每个View上都有一个CALayer作为父图层,View的内容作为子层显示,通过layer的contents属性决定了要显示的内容,通过修改过layer的一些属性可以实现一些华丽的效果. [阴影和圆 ...

  2. css3神奇的圆角边框、阴影框及其图片边框

    css3圆角,建议IE10以上 如果border-radius 单位是百分比,则参考为自身宽高,因此当宽高不一致时,圆角为不规则形状 如果border-radius 为50%,则为椭圆:当宽高一致时, ...

  3. [转]CSS如何设置html table表格边框样式

    原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...

  4. css中的边框样式

    在盒子模型中,盒子的边框是其重要的样式,通过边框我们可以很方便地看出盒子的长宽以及大小.边框的特性可以通过边框线,边框的宽度及颜色来呈现. 1,边框线 边框线指的是边框线条的样式,包括实线,虚线,点划 ...

  5. css盒子边框样式

    边框样式有全边框和单个边框样式,可对每条边设置不同的样式 如下代码P1为全边框样式,P2为单个边框设置不同的样式: <!DOCTYPE html> <html lang=" ...

  6. CSS 边框样式

    CSS 边框样式 直线边框样式 <html> <body> <!-- border: 1px 边框像素为1.solid red 边框样式以及边框颜色 --> < ...

  7. CSS border-right-style属性设置元素的右边框样式

    CSS border-right-style属性设置元素的右边框样式 边框的样式指的是边框的线条属性,指的是边框采用的是实线效果.短线效果还是其它的线条效果. border-right-style属性 ...

  8. css盒子模型之边框宽度，边框颜色与边框样式

    /* width和height只是设置盒子内容区的大小,而不是盒子的整个大小, 盒子可见框的大小由内容区,内边距和边框共同决定. */ .box1 { /* 设置内容区的宽度为400px */ wid ...

  9. css3-10 css3中的边框样式有哪几种

    css3-10 css3中的边框样式有哪几种 一.总结 一句话总结:1.border-radius 2. box-shadow 3.border-image三种,box一种border两种 1.css ...

随机推荐

  1. CentOS6 设置AliNetflow 环境

    CentOS6 设置AliNetflow 环境 Install OS 这一步略过. 只要保证操作系统是CentOS6.4 并且网络通畅 Install Python2.7.8 设置YUM 我的网络环境 ...

  2. android仿qq空间、微信朋友圈图片展示

    废话不多说,先上效果图 由于近期须要做朋友圈功能,所以在此记录一下,事实上非常多人不明确的一点应该是在图片的排列上面吧,不规则的排列,事实上非常easy的.就是一个GridView.然而你xml光光写 ...

  3. js 获取文件本地路径

    1.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  4. APP漏洞自动化扫描专业评测报告

    一.前言 目前在业界有很多自动化检测APP安全性的在线扫描平台.为了了解目前国内移动APP在线漏洞扫描平台的发展情况,我进行了一次移动安全扫描平台的评测分析:主要从漏洞项对比.扫描能力对比以及扫描结果 ...

  5. MYSQL入库常用PHP函数

    addslashes   addslashes() 函数在指定的预定义字符前添加反斜杠.这些字符是单引号(').双引号(").反斜线(\)与NUL(NULL字符).   stripslash ...

  6. Python开发【1.4数据类型】

    1.数字 数字数据类型用于存储数值. 他们是不可改变的数据类型,这意味着改变数字数据类型会分配一个新的对象. # 创建对象 var1 = 1 var2 = 2 # 删除对象 del var1 del ...

  7. 第二步：将LAD结果的属性值二（多）值化，投入计算模型

    一文详解LDA主题模型 - 达观数据 - SegmentFault 思否 https://segmentfault.com/a/1190000012215533 SELECT COUNT(1) FRO ...

  8. CSP 201612-3 权限查询 【模拟+STL】

    201612-3 试题名称: 权限查询 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 授权 (authorization) 是各类业务系统不可缺少的组成部分,系统用户通过授权 ...

  9. confusion_matrix函数的使用

    from:http://blog.csdn.net/m0_38061927/article/details/77198990 官方文档中给出的用法是 sklearn.metrics.confusion ...

  10. hdoj--2186--悼念512汶川大地震遇难同胞——一定要记住我爱你（模拟水题）

     悼念512汶川大地震遇难同胞--一定要记住我爱你 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (J ...