css3中边框的4种样式
border是CSS的一个属性,用它可以给能确定范围的HTML标签画边框,它可以定义边框线的类型、宽度和颜色,最终可以制作一些特殊效果
css3的边框有4种样式:
1.border-color(边框的颜色)
一般设置边框都有3个属性-宽度、线的样式、颜色,如果宽度设置了很多PX,那么就可以给边框设置很多颜色,让边框显示出渐变的效果,不过设置边框不同颜色时只能通过border-bottom-colors,border-top-colors,border-left-colors,border-right-colors-上边框 下边框 左边框 右边框这样逐个设置。
如:border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc
这个样式只能被火狐3.0以上识别,别的浏览器显示不出来
2.border-image(边框图片)
这个样式可以给边框添加图片,让边框的样子更花哨,不过要设置边框的宽度,不然看不出来
如:border-image:url(img/border.png) 30 30 round( round表示平铺)(平铺之后的边框是图片大小不变,重复复制铺满整个边框)
border-image:url(img/border.png) 30 30 stretch;(stretch表示拉伸)(拉伸之后的边框是图片中部被强行拉伸变形铺满整个边框,上下左右四个角属于盲区,这个区域的图片没有任何变化)
属性还有个repeat--重复,感觉和round没什么区别额
3.border-radius(边框弧度)
可以把边框四个直角变的圆滑,甚至可以变成圆形
如:border-radius: 11px;
4.box-shadow(阴影)
可以给有固定宽高的html标签加阴影
如:box-shadow:5px 2px 6px #000;(数值的含义:阴影水平偏移,阴影垂直偏移,模糊,颜色)(水平偏移和垂直偏移都可以设置负值,阴影的位置就可以在图形的上方
我想,对于一个程序员来说,尤其是前端程序员,CSS并不陌生,但是CSS3是什么呢?其实CSS3和CSS...就多了个"3"而已..(废话= =||).
CSS3早已经不是新鲜事物,但是学习它却用处不少.
在学习之前,我们需要知道,CSS3虽然很有趣,但是却并没有被当前浏览器完全支持.所以如果我们要在网站中使用CSS3时,最好有相应的不兼容处理.
当然,现在我们只考虑主流的5大浏览器,他们分别是IE, FireFox, Chrome, Safari, Opera.
CSS3的浏览器支持状况:
- √ Firefox (3.05+…部分支持)
- √ Google Chrome (1.0.154+…部分支持)
- √ Google Chrome (2.0.156+…较好支持)
- × Internet Explorer (IE7, IE8 不支持)
- √ Opera (9.6+…很少支持)
- √ Safari (3.2.1+ windows…较好支持)
我们根据需要使用,IE7,8是不支持的- -这个有点郁闷.
既然CSS3不完全支持?我们为什么要写呢?我想,当你了解到他的好处时,你也会叫好的.
从此就会感叹"原来实现圆角是这么简单","哇,还有这效果?",咳咳,打住,继续.有什么效果后面会知道的.
今天主要学习CSS3中的边框(Border). 这对我们来说并不陌生.多少次写下 border:1px solid red了..那么CSS3中会给我们带来什么惊喜呢?
在CSS3中.边框多了4种新特性
- Border-color(设置边框颜色)
- Border-image(通过图片设置为边框)
- Border-radius(边框的半径)
- box-shadow(阴影效果)
而我使用的浏览器版本为:IE8, FireFox10.0.9, Chrome 22.0.1229.94, Safari 5.1.7, Opera 12.50。。。基本都是最新版本.
编程环境:VS2010旗舰版 ASP.NET
我们之前要给一个div加上边框时,我们会这样写
![](/assets/blank.gif)
<html> <head><style type="text/css"> .border_test{border:5px solid red; }</style> </head> <body><div class='border_test'>常用的边框样式</div> </body> </html>
![](/assets/blank.gif)
border-color
既然我们已经可以设置边框颜色了,为什么还要border-color呢?因为CSS3的border有所不同.
使用border-color如果你设置了边框宽度是X。那么你就可以在这个这个边框上使用X种颜色,每种颜色显示1px的宽度.
(ps:如果你边框宽度是10px,而你只设置了5种颜色,那么最后一种颜色将会填充剩下的宽度)
具体写法看下面代码
![](/assets/blank.gif)
<html> <head><style type="text/css"> .border_test{border:5px solid red; border-color:red blue green black;}</style> </head> <body><div class='border_test'>CSS3 Border-color样式</div> </body> </html>
![](/assets/blank.gif)
但是结果和我们想的并不一样.
我们只看到了4个边框分别对应4种颜色.分别是 上 右 下 左。
当然,如果我们只输入3种颜色,中间的颜色就对应 左和右,具体的自己试一下吧.
那么之前我们说的每像素一种颜色的效果呢?别着急."那么你就可以在这一边框上使用X种颜色".因为border-color是针对整个4条边框的,所以不是针对某条边框的.
如果我们需要做到上面的效果,可以针对某一条边框设置。他们分别是:
- border-top-color
- border-right-color
- border-bottom-color
- border-left-color
所以我们需要改一下代码
![](/assets/blank.gif)
<html> <head><style type="text/css"> .border_test{border:5px solid red; -moz-border-top-colors:Blue Yellow Red Black Green;-moz-border-bottom-colors:Blue Yellow Red Black Green;-moz-border-right-colors:Blue Yellow Red Black Green;-moz-border-left-colors:Blue Yellow Red Black Green;}</style> </head> <body><div class='border_test'>CSS3 Border-color样式</div> </body> </html>
![](/assets/blank.gif)
运行后
效果出来了有木有?虽然看不太清楚,不过确实每个像素一个颜色了,这样如果我们要做渐变颜色的话就方便了很多,只需要调整颜色就好了
有人会问了,为什么前面加了个-moz-,这个可以通过点击传送门了解.
看完《传送门》后,我们在对代码做写修改.
![](/assets/blank.gif)
.border_test{border:5px solid red; -moz-border-top-colors:Blue Yellow Red Black Green;-ms-border-top-colors:Blue Yellow Red Black Green;-wekit-border-top-colors:Blue Yellow Red Black Green;-o-border-top-colors:Blue Yellow Red Black Green;border-top-colors:Blue Yellow Red Black Green;}
![](/assets/blank.gif)
但是却发现,只有火狐上出现了效果,也就是说,border-边框-colors这个属性只有在火狐上可用,其他的不兼容.可惜了..
Border-image
border-image主要是用图片来填充边框.
border-image的分解属性分别为
border-image-source 指定border的背景图的url
border-image-slice 设置图片如何切割的属性,非定位!
border-image-width 定义border-image的显示区域的
border-image-repea
下面我们来逐个解析.
border-image-source
这个是指定border的背景图的url, 例
border-image-source :url(../images/border.gif);
这里可以设置为none,也就是无背景图
border-image-slice
设置图片如何切割的属性,(重点理解)他的值是四个数值, 没单位(实际上是已经固定是px了, 注意, 这个值不能是负值或大于图片的尺寸), 例如: border-image-slice:1 2 3 4; 你想得没错, 同样对应的是”上右下左”,将这几个数值, 把背景图片, 切割开来,具体一会再说
border-image-width
定义border-image的width, 这个是定义border-image的显示区域的(这个只是在w3c上描述的, 但在实际测试过, 设置这个属性没有作用, 但是border-width能生效)
border-image-repeat;
repeat有三个值选择
[ stretch | repeat | round ]:拉伸 | 重复 | 平铺 (其中stretch是默认值。)
好了,我们回头来看slice,也就是切割.= =说实话,不知道该怎么讲,还是上图吧.
嗯- -在这里我要借别人的2张图,因为我用“画图”花了好久,实在看不下去。。。最讨厌画画了.
左上图是一个这样的样式.border-image-slice:10 15 20 25; 他会将图片分割为右上边这样的9宫格图片.
left,top,right,bottom分别是你设置的距离,这一部分会被抽取出来作为边框.
top-left, top-right, bottom-left, bottom-right同样会被抽取出来,与left,top,right,bottom不同的是,他们不会受repeat,stretch,round的影响.
而left,top,right,bottom,则有可能因为拉伸什么的而改变宽度和高度.不知道这样说会不会容易理解点?
下面看代码
![](/assets/blank.gif)
<html> <head><style type="text/css"> .border_test{-webkit-border-image: url(6.jpg) 0 12 0 12 stretch stretch;-moz-border-image: url(6.jpg) 0 12 0 12 stretch stretch;-o-border-image: url(6.jpg) 0 12 0 12 stretch stretch;-ms-border-image: url(6.jpg) 0 12 0 12 stretch stretch;-border-image: url(6.jpg) 0 12 0 12 stretch stretch;display: block;border-width: 0 12px;padding: 10px;text-align: center;font-size: 16px;text-decoration: inherit;color:white;}</style> </head> <body><div class='border_test'>CSS3 Border-image样式</div> </body> </html>
![](/assets/blank.gif)
效果如下
用的材料图是
同样可惜的是,我这里只有FireFox和Safari出了效果,当然这也不能排序Chrome不能,因为听说有几个版本的可以。哈哈
css3中边框的4种样式相关推荐
- html中选择样式,html中css三种常见的样式选择器 zz
1:标签选择器 标签选择器,是所有带有某种标签的都生效.这里以p为例,也就是所有的带有p标记的都会这样的样式 p{font:"宋体"; color:#FF0000} 我现在表现的是 ...
- css中变形,css3中变形处理
transfrom功能 在css3 中可以使用transfrom功能实现文字或图像的旋转,缩放,倾斜,移动等变形处理 deg是css3中使用的一种角度单位. 旋转: 使用rotate方法,在参数中加入 ...
- CSS3中背景与边框相关样式
1 与背景相关的新增属性 background-clip:指定背景的显示范围. background-origin:指定绘制背景图像时的起点. background-size:指定背景中图像的尺寸. ...
- css3新增了哪三种边框效果,怎么在CSS3中实现一个边框效果
怎么在CSS3中实现一个边框效果 发布时间:2021-03-11 18:01:54 来源:亿速云 阅读:125 作者:Leah 怎么在CSS3中实现一个边框效果?相信很多没有经验的人对此束手无策,为此 ...
- css3特效框,科技常识:6种非常炫酷的CSS3按钮边框动画特效
今天小编跟大家讲解下有关6种非常炫酷的CSS3按钮边框动画特效 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关6种非常炫酷的CSS3按钮边框动画特效 的相关资料,希望小伙伴们看了有所帮助. ...
- html边框炫酷效果,6种炫酷的CSS3按钮边框动画特效_html/css_WEB-ITnose
这是一款效果非常炫酷的CSS3按钮边框动画特效.这组按钮边框动画共有6种不同的效果.当鼠标滑过按钮的时候,按钮的边框会以不同的方式进行各种动画,效果非常的炫酷. 在线预览 源码下载 使用方法 HTML ...
- 移动端采用Flexible将PX转换REM适配及开发中Retina屏1px边框的两种解决方案
移动端采用Flexible将PX转换REM适配及开发中Retina屏1px边框的两种解决方案 说明:两个方案均基于Webpack构建. 方案一: 搭建环境及相关配置 webpack 3,需要loade ...
- html边框复合属性,详解CSS的border边框属性及其在CSS3中的新特性
基础你可能很熟悉边的最基本用法. CSS Code复制内容到剪贴板 border:1pxsolidblack; 上面的代码将给元素应用1px的边.即简洁又简单:但我们也可以稍作修改. CSS Code ...
- 什么是css选择器?css3中5种常见的基本选择器-web前端教程
本章我们给大家讲解一下什么是css选择器?css3中5种常见的基本选择器.有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一:什么是css选择器? CSS是一种用于屏幕上渲染html, ...
最新文章
- Spring.NET实用技巧3——NHibernate分布式事务(上)
- 谈谈你对MVC和三层架构的理解?(月薪三万的面试题)
- 计算机模拟病例考试试题,计算机模拟病例考试评分方法的研究概述
- 英语发音规则---C字母
- Thumbelina,摘自iOS应用Snow White and more stories
- linux启动中继服务器失败,Tor中继服务器在Linux里安装配置的流程
- matepad2会有鸿蒙os,华为MatePad Pro2曝光!两款产品,预装鸿蒙OS
- 破解版editPlus
- 从数据备份恢复来看,iCloud和iTunes到底有什么区别?
- pip2 python2.7 安装opencv-python cv2遇到问题的可能解决办法 skbuild list(pattern)
- 轻松易懂的CSS学习权威指南来了
- 2021年第十二届蓝桥杯大赛软件赛决赛C/C++大学A组 个人部分题解
- 和平精英亚服服务器信号差,和平精英延迟高怎么办 网络卡顿解决方法
- 病毒HEUR:Trojan-Downloader.Win32.Generic
- 一文搞懂 Redis
- Numpy IO:npy、npz
- Web安全(任意文件下载)
- 亚马逊独一份的有趣规则
- 黄聪:Destoon供求栏目下旺旺无法正常显示,点击提醒“会员名不存在”
- ro素质点模拟器_仙境传说RO:最具人气职业猎人成长攻略手册