CSS3系列教程:边框颜色

2016-02-19 18:18 12 1 收藏

下面是个超简单的CSS3系列教程:边框颜色教程,图老师小编精心挑选推荐,大家行行好,多给几个赞吧,小编吐血跪求~

【 tulaoshi.com - Web开发 】

现在我们来看一看如何为边框的border-color添加更多的色彩。

使用CSS3的border-radius属性,如果你设置了border的宽度是X px,那么你就可以在这个border上使用X种颜色,每种颜色显示1px的宽度。如果说你的border的宽度是10个像素,但是只声明了5或6中颜 色,那么最后一个颜色将被添加到剩下的宽度。

浏览器兼容性

目前只有Firefox支持CSS3 border-colour属性,所以我们这里只需使用-moz前缀。

所有本系列关于CSS3的文章都会及时更新,以跟踪浏览器的兼容性。

CSS3中的边框颜色

border-color

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

这里是一个10px宽的标准边框和边框颜色:

#borderColor {  border: 10px solid #dedede;  -moz-border-bottom-colors: #300 #600 #700 #800 #900 #A00;  -moz-border-top-colors: #300 #600 #700 #800 #900 #A00;  -moz-border-left-colors: #300 #600 #700 #800 #900 #A00;  -moz-border-right-colors: #300 #600 #700 #800 #900 #A00;  padding: 15px 25px;  height: inherit;  width: 590px;}

 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)有圆角的边框颜色

border-color-round

#borderColorCorner {  border: 10px solid #dedede;  -moz-border-radius: 15px;  -moz-border-bottom-colors: #303 #404 #606 #808 #909 #A0A;  -moz-border-top-colors: #303 #404 #606 #808 #909 #A0A;  -moz-border-left-colors: #303 #404 #606 #808 #909 #A0A;  -moz-border-right-colors: #303 #404 #606 #808 #909 #A0A;  padding: 15px 25px;  height: inherit;  width: 590px;}

来源:http://www.tulaoshi.com/n/20160219/1617221.html

延伸阅读
标签: Web开发
阴影大约从CSS2就开始有了,但是只有Safari一个浏览器支持它,到现在依然是这样。阴影在CSS3中可以应用在边框和文字上,就像图片的阴影效果一样。 上一篇介绍了:CSS3教程(3):border-color网页边框色彩 一般可以分为box-shadow和textshadow两类。 CSS3的box-shadow和textshadow可以写做:box-shadow:Apx Bpx Cpx #xxx; Apx = x轴 Bpx = y...
标签: Web开发
CSS3透明不透明渐变随便你怎么叫它吧!这里是一些使用CSS3透明度的指南以及一些例子。 其实这个firefox很久以前就支持了,而IE一直不支持! 上一篇文章:CSS3教程(7):CSS3嵌入字体 opacity声明用来设置一个元素的透明度:层、文字、图片等一个opacity的值为1的元素是完全不透明的,反之,值为0是完全透明的,看不见的。1到0之间的任何值...
说起CSS3的新特性,就不得不提到 Media Queries 。本文比较详细,所以很多实际中用不到。所以如果只是想简单了解Media Queries,推荐参考 CSS3 Media Queries 。 CSS2.1定义了 Media 的部分,包括类型、组别和规则等。CSS并非为了显示器而创造,而是应用于各种各样的媒体,比如常见的显示器,越来愈多的手持设备,可能略显过时的电视机等等。 ...
标签: Web开发
说起CSS3的新特性,就不得不提到 Media Queries 。 本文比较详细,所以很多实际中用不到。所以如果只是想简单了解Media Queries,推荐参考 CSS3 Media Queries 。 CSS2.1定义了 Media 的部分,包括类型、组别和规则等。CSS并非为了显示器而创造,而是应用于各种各样的媒体,比如常见的显示器,越来愈多的手持设备,可能略显过...
标签: Web开发
你们中有许多人可能已经听到过有关CSS3的不少传言,但是我们现在能真正用到的CSS3技巧又有哪些呢?本文,我将向你展示一些 与众不同的CSS3技巧 ,这些技巧在一些主要的浏览器中表现良好(如Firefox,Chrome,Safari,Opera浏览器)。这些效果会在不支持的浏览器中降级渲染(如IE浏览器)。使用浏览器特定的声明,许多提议的CSS3样式都可以马...

经验教程

550

收藏

83
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部