CSS3系列教程:边框颜色

2016-02-19 18:18 10 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的文章都会及时更新，以跟踪浏览器的兼容性。

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

有圆角的边框颜色

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

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

上一篇： 10个十分震撼的 HTML5 和 JavaScript 效果
下一篇：通用分页存储过程真的有注入漏洞吗?

看过《CSS3系列教程:边框颜色》的人还看了以下文章更多>>

CSS3教程(2):网页边框半径和网页圆角

标签： Web开发

页面中圆角的实现是个很头疼的问题，虽然现在有很多种实现方法，但是都是比较麻烦的。在本文中，让我们看看如何使用CSS3 border-radius来实现圆角DIV。跨浏览器兼容性就像在上一篇《CSS3教程:什么是CSS3》中提到的，并不是所有的浏览器支持CSS3，但是那些比较好的浏览器选择兼容，而不是直接支持。我们有两个能使用的前缀。前缀： -moz...

CSS3教程(8):CSS3透明度指南

标签： Web开发

CSS3透明不透明渐变随便你怎么叫它吧！这里是一些使用CSS3透明度的指南以及一些例子。其实这个firefox很久以前就支持了，而IE一直不支持！上一篇文章：CSS3教程(7):CSS3嵌入字体 opacity声明用来设置一个元素的透明度：层、文字、图片等一个opacity的值为1的元素是完全不透明的，反之，值为0是完全透明的，看不见的。1到0之间的任何值...

css教程：CSS3 Media Queries 详解

标签： Web开发

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

CSS教程：详解CSS3 Media Queries

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

CSS教程:与众不同的CSS3技巧

标签： Web开发

你们中有许多人可能已经听到过有关CSS3的不少传言，但是我们现在能真正用到的CSS3技巧又有哪些呢？本文，我将向你展示一些与众不同的CSS3技巧，这些技巧在一些主要的浏览器中表现良好（如Firefox，Chrome，Safari，Opera浏览器）。这些效果会在不支持的浏览器中降级渲染（如IE浏览器）。使用浏览器特定的声明，许多提议的CSS3样式都可以马...

查看更多精彩>>