css3边框_动力节点Java学院整理


Posted in HTML / CSS onJuly 11, 2017

CSS3中的边框(Border). 这对我们来说并不陌生.多少次写下 border:1px solid red了..那么CSS3中会给我们带来什么惊喜呢?

在CSS3中.边框多了4种新特性

1.Border-color(设置边框颜色)

2.Border-image(通过图片设置为边框)

3.Border-radius(边框的半径)

4.box-shadow(阴影效果)

而我使用的浏览器版本为:IE8,  FireFox10.0.9,  Chrome 22.0.1229.94, Safari 5.1.7, Opera 12.50。。。基本都是最新版本.

我们之前要给一个div加上边框时,我们会这样写

<html>
<head>
    <style type="text/css"> 
        .border_test
        {
            border:5px solid red;    
        }
    </style>
</head>
<body>
    <div class='border_test'>常用的边框样式</div>
</body>
</html>

border-color

css3边框_动力节点Java学院整理 

既然我们已经可以设置边框颜色了,为什么还要border-color呢?因为CSS3的border有所不同.

使用border-color如果你设置了边框宽度是X。那么你就可以在这个这个边框上使用X种颜色,每种颜色显示1px的宽度.(ps:如果你边框宽度是10px,而你只设置了5种颜色,那么最后一种颜色将会填充剩下的宽度)

具体写法看下面代码

<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>

但是结果和我们想的并不一样.

css3边框_动力节点Java学院整理 

我们只看到了4个边框分别对应4种颜色.分别是 上 右 下 左。

当然,如果我们只输入3种颜色,中间的颜色就对应 左和右,具体的自己试一下吧.

那么之前我们说的每像素一种颜色的效果呢?别着急."那么你就可以在这一边框上使用X种颜色".因为border-color是针对整个4条边框的,所以不是针对某条边框的.

如果我们需要做到上面的效果,可以针对某一条边框设置。他们分别是:

  1. border-top-color
  2. border-right-color
  3. border-bottom-color
  4. border-left-color

所以我们需要改一下代码

<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>

运行后

css3边框_动力节点Java学院整理 

效果出来了有木有?虽然看不太清楚,不过确实每个像素一个颜色了,这样如果我们要做渐变颜色的话就方便了很多,只需要调整颜色就好了

css3边框_动力节点Java学院整理 

.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;
        }

但是却发现,只有火狐上出现了效果,也就是说,border-边框-colors这个属性只有在火狐上可用,其他的不兼容.可惜了..

Border-image

border-image主要是用图片来填充边框.

border-image的分解属性分别为

  1. border-image-source 指定border的背景图的url
  2. border-image-slice 设置图片如何切割的属性,非定位!
  3. border-image-width 定义border-image的显示区域的
  4. 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,也就是切割.= =说实话,不知道该怎么讲,还是上图吧.

css3边框_动力节点Java学院整理                                       css3边框_动力节点Java学院整理

左上图是一个这样的样式.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,则有可能因为拉伸什么的而改变宽度和高度.不知道这样说会不会容易理解点?

下面看代码

<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>

效果如下

css3边框_动力节点Java学院整理 

用的材料图是

css3边框_动力节点Java学院整理 

同样可惜的是,我这里只有FireFox和Safari出了效果,当然这也不能排序Chrome不能,因为听说有几个版本的可以。 

Border-radius

终于到圆角了,感觉花了那么多字去写css3有点怪,因为本来很简单的- -哈

border-radius

参数:半径,不可以是负数,为0的话是直角

<html>
<head>
    <style type="text/css"> 
        .border_test
        {
            border:5px solid red; 
            -moz-border-radius:15px;
            -ms-border-radius:15px;
            -wekit-border-radius:15px;
            -o-border-radiuss:15px;
            border-radius:15px;
        }
    </style>
</head>
<body>
    <div class='border_test'>CSS3 Border-radius样式</div>
</body>
</html>

效果

css3边框_动力节点Java学院整理 

圆角效果是比较常见的,而且在FireFox,Chrome,Safari,Opera都支持圆角效果,可惜IE还是只能回老家喝粥.不过据说IE9支持了。

相关属性: border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius

分别对应一个位置,需要注意的是,如果只有一个,会变成4分之1圆角,如果这4个里其中一个为0,那就回变成直角- -这个我也很纳闷.

box-shadow

最后一个,阴影

<html>
<head>
    <style type="text/css"> 
        .border_test
        {
            border:5px solid red; 
            -moz-box-shadow:5px 2px 6px black;
            -ms-box-shadow:5px 2px 6px black;
            -wekit-box-shadow:5px 2px 6px black;
            -o-box-shadow:5px 2px 6px black;
            box-shadow:5px 2px 6px black;
        }
    </style>
</head>
<body>
    <div class='border_test'>CSS3 Border-shadow样式</div>
</body>
</html>

css3边框_动力节点Java学院整理 

三个像素值和颜色分别是

阴影水平偏移值(可取正负值);阴影垂直偏移值(可取正负值);阴影模糊值;阴影颜色

依然是IE回家喝粥,其他都可以。郁闷

HTML / CSS 相关文章推荐
css3动画效果抖动解决方法
Sep 03 HTML / CSS
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
Dec 19 HTML / CSS
css3让div随鼠标移动而抖动起来
Feb 10 HTML / CSS
css3实现可滑动跳转的分页插件示例
May 08 HTML / CSS
CSS3下的渐变文字效果实现示例
Mar 02 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
Sep 14 HTML / CSS
HTML5 FileReader对象的具体使用方法
May 22 HTML / CSS
HTML5 层的叠加的实现
Jul 07 HTML / CSS
AmazeUI 列表的实现示例
Aug 17 HTML / CSS
html5小程序飞入购物车(抛物线绘制运动轨迹点)
Oct 19 HTML / CSS
html5表单的required属性使用
Jul 07 HTML / CSS
HTML5页面打开微信小程序功能实现
Sep 23 HTML / CSS
使用 css3 实现圆形进度条的示例
Jul 05 #HTML / CSS
css3学习系列之移动属性详解
Jul 04 #HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
Jul 04 #HTML / CSS
利用css3如何设置没有上下边的列表间隔线
Jul 03 #HTML / CSS
利用css3画个同心圆示例代码
Jul 03 #HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 #HTML / CSS
使用CSS3制作一个简单的进度条(demo)
May 23 #HTML / CSS
You might like
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
PHP stream_context_create()函数的使用示例
2015/05/12 PHP
TopList标签和JavaScript结合两例
2007/08/12 Javascript
Exjs 入门篇
2010/04/07 Javascript
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
JavaScript中九种常用排序算法
2014/09/02 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
js限制input标签中只能输入中文
2015/06/26 Javascript
jQuery 生成svg矢量二维码
2016/08/09 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
2018/01/30 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
2019/01/18 jQuery
VuePress 中如何增加用户登录功能
2019/11/29 Javascript
JavaScript工具库MyTools详解
2020/01/01 Javascript
python读取csv文件示例(python操作csv)
2014/03/11 Python
python正常时间和unix时间戳相互转换的方法
2015/04/23 Python
python装饰器与递归算法详解
2016/02/18 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
django的settings中设置中文支持的实现
2019/04/28 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
python实现五子棋人机对战游戏
2020/03/25 Python
Python实现队列的方法示例小结【数组,链表】
2020/02/22 Python
英国现代绅士品牌:Hackett
2017/12/17 全球购物
英国综合网上购物商城:The Hut
2018/07/03 全球购物
公司综合部的成员自我评价分享
2013/11/05 职场文书
毕业证丢失证明
2014/01/15 职场文书
研究生求职自荐书
2014/06/23 职场文书
国际贸易实训报告
2014/11/05 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
新学期开学标语2015
2015/07/16 职场文书
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电
Python利用FlashText算法实现替换字符串
2022/03/31 Python
Python字符串的转义字符
2022/04/07 Python