CSS3教程(3):border-color网页边框色彩

2016-02-19 23:46 5 1 收藏

下面，图老师小编带您去了解一下CSS3教程(3):border-color网页边框色彩，生活就是不断的发现新事物，get新技能~

【 tulaoshi.com - Web开发】

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

上一篇介绍了：CSS3教程(2):网页边框半径和网页圆角

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

浏览器兼容性

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

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

CSS3中的边框颜色

border-color

这里是一个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;}

浏览器支持：

FireFox (3.0.5) Google Chrome (1.0.154+) Google Chrome (2.0.156+) Internet Explorer (IE7/IE8 RC1) Opera (9.6) Safari (3.2.1, Windows) 有圆角的边框颜色

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

浏览器支持：

FireFox (3.0.5) Google Chrome (1.0.154+) Google Chrome (2.0.156+) Internet Explorer (IE7/IE8 RC1) Opera (9.6) Safari (3.2.1, Windows)

来源:https://www.tulaoshi.com/n/20160219/1630587.html

上一篇：可爱的qq分组设计_徘徊在崩溃的边缘回眸
下一篇：越是没有人爱越是要爱自己

看过《CSS3教程(3):border-color网页边框色彩》的人还看了以下文章更多>>

CSS3的优势以及网页设计师如何使用CSS3技术

标签： Web开发

前些日子在SmashingMagazine看到一篇关于CSS3新技术不错的文章，它详细介绍了CSS3的新特性和它的使用方法，它包括:浏览器专有属性、选择器(属性选择器、连字符、伪类、伪元素)、RGBA和透明度属性、多栏布局、多背景图、Word Wrap、文字阴影、CSS圆角、边框图片、盒阴影、盒尺寸、媒体查询、语音，并详细说明了每个新技术目前有哪些浏览器...

CSS3系列教程:阴影

标签： Web开发

阴影大约从CSS2就开始有了，但是只有Safari一个浏览器支持它，到现在依然是这样。阴影在CSS3中可以应用在边框和文字上，就像图片的阴影效果一样。一般可以分为box-shadow和textshadow两类。 CSS3的box-shadow和textshadow可以写做：box-shadow:Apx Bpx Cpx #xxx; Apx = x轴 Bpx = y轴 Cpx = 投影长度 #XXX = 像通常一样的颜色了解了这些，...

css教程：CSS3 Media Queries 详解

标签： Web开发

说起CSS3的新特性，就不得不提到 Media Queries 。本文比较详细，所以很多实际中用不到。所以如果只是想简单了解Media Queries，推荐参考 CSS3 Media Queries 。 CSS2.1定义了 Media 的部分，包括类型、组别和规则等。CSS并非为了显示器而创造，而是应用于各种各样的媒体，比如常见的显示器，越来愈多的手持设备，可能略显过...

CSS教程：详解CSS3 Media Queries

标签：平面设计海报设计广告设计画报设计签名设计服装设计名片设计画册设计版式设计商标设计

CSS3制作的精彩的网页实例教程

标签： Web开发

今天看到 Joshua Johnson 的一篇 10 Amazing Examples of Innovative CSS3 Animation 很是精彩，大概翻译如下： CSS3带来了很多令人印象深刻的新功能，最有意思的或许是很多基于javascript来实现的功能，现在可以用CSS动画来制作。以下是我找到的用CSS3创建的精彩案例：注意：以下演示代码在IE6等低端浏览器下无效，请下载并安装现代浏览器...

查看更多精彩>>