【免费】css3边框_动力节点Java学院整理资源-CSDN文库

需积分: 0 9 浏览量 2020-09-24 20:08:41 上传评论收藏 163KB PDF 举报

资源推荐

资源详情

资源评论

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

主要介绍了css3边框的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来

看看吧

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

既然我们已经可以设置边框颜色了，为什么还要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>

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

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

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

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余4页未读，立即下载

内容反馈

weixin_38690376

粉丝: 2
资源: 894

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip