css边框样式、边框配色、边框阴影、边框圆角、图片边框
边框样式
<div style="width: 300px; height: 50px; border-style: dotted;">点线式边框</div>
<p> </p>
<div style="width: 300px; height: 50px; border-style: dashed;">破折线式边框</div>
<p> </p>
<div style="width: 300px; height: 50px; border-style: solid;">直线式边框</div>
<p> </p>
<div style="width: 300px; height: 50px; border-style: double;">双线式边框</div>
<p> </p>
<div style="width: 300px; height: 50px; border-style: groove;">槽线式边框</div>
<p> </p>
<div style="width: 300px; height: 50px; border-style: ridge;">脊线式边框</div>
<p> </p>
<div style="width: 300px; height: 50px; border-style: inset;">内嵌效果的边框</div>
<p> </p>
<div style="width: 300px; height: 50px; border-style: outset;">突起效果的边框</div>
边框配色
边框阴影
<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;"> </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) 改为内部阴影。
边框圆角
<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边框样式、边框配色、边框阴影、边框圆角、图片边框的更多相关文章
- （一一九）通过CALayer实现阴影、圆角、边框和3D变换
在每个View上都有一个CALayer作为父图层,View的内容作为子层显示,通过layer的contents属性决定了要显示的内容,通过修改过layer的一些属性可以实现一些华丽的效果. [阴影和圆 ...
- css3神奇的圆角边框、阴影框及其图片边框
css3圆角,建议IE10以上 如果border-radius 单位是百分比,则参考为自身宽高,因此当宽高不一致时,圆角为不规则形状 如果border-radius 为50%,则为椭圆:当宽高一致时, ...
- [转]CSS如何设置html table表格边框样式
原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...
- css中的边框样式
在盒子模型中,盒子的边框是其重要的样式,通过边框我们可以很方便地看出盒子的长宽以及大小.边框的特性可以通过边框线,边框的宽度及颜色来呈现. 1,边框线 边框线指的是边框线条的样式,包括实线,虚线,点划 ...
- css盒子边框样式
边框样式有全边框和单个边框样式,可对每条边设置不同的样式 如下代码P1为全边框样式,P2为单个边框设置不同的样式: <!DOCTYPE html> <html lang=" ...
- CSS 边框样式
CSS 边框样式 直线边框样式 <html> <body> <!-- border: 1px 边框像素为1.solid red 边框样式以及边框颜色 --> < ...
- CSS border-right-style属性设置元素的右边框样式
CSS border-right-style属性设置元素的右边框样式 边框的样式指的是边框的线条属性,指的是边框采用的是实线效果.短线效果还是其它的线条效果. border-right-style属性 ...
- css盒子模型之边框宽度，边框颜色与边框样式
/* width和height只是设置盒子内容区的大小,而不是盒子的整个大小, 盒子可见框的大小由内容区,内边距和边框共同决定. */ .box1 { /* 设置内容区的宽度为400px */ wid ...
- css3-10 css3中的边框样式有哪几种
css3-10 css3中的边框样式有哪几种 一.总结 一句话总结:1.border-radius 2. box-shadow 3.border-image三种,box一种border两种 1.css ...
随机推荐
- 洛谷 P3984 高兴的津津
P3984 高兴的津津 题目描述 津津上高中了.她在自己的妈妈的魔鬼训练下,成为了一个神犇,每次参加一次OI比赛必拿Au虐全场.每次她拿到一个Au后就很高兴.假设津津不会因为其它事高兴,并且她的高兴会 ...
- tplink wr886n v5.0 ttl 接线方法
我的倒是有ttl信息,但是全是乱码,换过RX和TX,也换过串口速率都没用,附上TTL接线图. ==================================2016-11-02========= ...
- GitHub现VMware虚拟机逃逸EXP，利用三月曝光的CVE-2017-4901漏洞
今年的Pwn2Own大赛后,VMware近期针对其ESXi.Wordstation和Fusion部分产品发布更新,修复在黑客大赛中揭露的一些高危漏洞.事实上在大赛开始之前VMware就紧急修复了一个编 ...
- android/java经常使用的工具类源代码
anroid.java经常使用的工具类源代码,当中包含文件操作.MD5算法.文件操作.字符串操作.调试信息log.base64等等. 下载地址:http://download.csdn.net/det ...
- Boss OpenCart 商城自适应主题模板 ABC-0012-01
Boss OpenCart 商城自适应主题模板 ABC-0012-01 模板特性兼容浏览器IE7, IE8, IE9, IE10, Firefox, Safari, Chrome OpenCart版本 ...
- 【剑指Offer学习】【面试题65：滑动窗体的最大值】
题目:给定一个数组和滑动窗体的大小,请找出全部滑动窗体里的最大值. 举例说明 比如,假设输入数组{2,3,4,2,6,2,5,1}及滑动窗体的大小.那么一共存在6个滑动窗体,它们的最大值分别为{4,4 ...
- jmeter实现Http接口测试介绍
构建一个测试页面 页面功能测试说到底就是模拟用户浏览点击页面的全过程,很多的测试工具都可以对该过程进行录制后模拟用户操作,而压力测试就是将这个过程在单位时间内重复成千上万次,看检测应用的高可用,接下来 ...
- 玩转单元測试之WireMock -- Web服务模拟器
WireMock 是一个灵活的库用于 Web 服务測试,和其它測试工具不同的是.WireMock 创建一个实际的 HTTPserver来执行你的 Web 服务以方便測试. 它支持 HTTP 响应存根. ...
- 99_leetcode_Best Time to Buy and sell Stock
Say you have an array for which the ith element is the price of a given stock on day i. If you were ...
- Python爬虫开发【第1篇】【beautifulSoup4解析器】
CSS 选择器:BeautifulSoup4 Beautiful Soup 也是一个HTML/XML的解析器,主要的功能也是如何解析和提取 HTML/XML 数据. pip 安装:pip instal ...