CSS3之边框多颜色Border-color属性使用

   一、Border-color的语法

  代码如下:

  元素选择器 {

  -moz-border-top-colors: color color color; /*顶边边框*/

  -moz-border-right-colors:color color color; /*右边边框*/

  -moz-border-bottom-colors: color color color; /*底边边框*/

  -moz-border-left-colors: color color color; /*左边边框*/

  }

  二、Border-color的兼容情况


  三、Border-color的实例

  CSS代码:

  代码如下:

  div {width:100px;height:50px;border:10px solid transparent;margin:20px;

  /*顶边边框*/

  -moz-border-top-colors: #bfe6f8 #b0e3fa #9fdefa #89d6f9 #73cff9 #5dcafc #3ac1fe #20b7fb #05b1ff;

  /*底边边框*/

  -moz-border-bottom-colors: #ded7fc #c9bdfd #b7a6fe #a18bfc #8c72fb #7657fe #633ffe #4e25fe #3c0ffd;

  /*右边边框*/

  -moz-border-right-colors: #dbfdd5 #c4feba #adfe9f #96fe84 #89ff76 #72fa5b #57fd3c #43fe24 #25fd01;

  /*左边边框*/

  -moz-border-left-colors: #ffc9c9 #ffb0b0 #ff9696 #fd7f7f #fd6969 #fd5050 #fd3838 #fd1b1b #fe0101;

  }

  HTML代码:

  代码如下:

  <div>梦龙小站</div> 

  预览效果:

时间: 2024-11-08 22:17:14

CSS3之边框多颜色Border-color属性使用的相关文章

CSS3之边框多颜色Border-color属性使用示例

CSS3之边框多颜色Border-color是专为边框的多颜色而准备的属性.在CSS2中也有边框颜色这个属性,但是边框颜色属性在CSS3中又有什么惊人之举呢?下面就为大家介绍一下CSS3之边框多颜色Border-color吧. 一.Border-color的语法   复制代码 代码如下: 元素选择器 { -moz-border-top-colors: color color color; /*顶边边框*/ -moz-border-right-colors:color color color; /

图解css3:核心技术与案例实战. 3.4 CSS3圆角边框属性

3.4 CSS3圆角边框属性 在Web页面上圆角效果很常见.圆角给页面增添曲线之美,让页面不那么生硬,但是为了设计圆角效果,Web设计师们要花费更多的时间与精力. 3.4.1 border-radius属性的语法及参数 CSS3中专门针对元素的圆角效果增加了一个圆角属性border-radius.Web设计师不会为Web页面中的圆角效果纠结了. 语法: border-radius: none | <length> {1,4}[/<length>{1,4}] ? border-rad

图解css3:核心技术与案例实战. 3.3 CSS3图片边框属性

3.3 CSS3图片边框属性 border-image效果在CSS2中,只有使用背景图片来制作,而且制作过程非常复杂,做完后也很难维护.如今CSS3中增添了一个图片边框的属性,能够模拟出background-image属性的功能,功能比background-image强大,我们可以使用border-image属性给任何元素( 除border-collapse属性值为collapse的table元素之外)设置图片效果边框,还可以使用这个来制作圆角按钮效果.渐变的Tabs效果等. 3.3.1 bor

如何在storyboard里设置view的圆角、边框、颜色等属性

问题描述 如何在storyboard里设置view的圆角.边框.颜色等属性 如何在storyboard里设置view的圆角.边框.颜色等属性? 解决方案 user efined runtime attributes中添加keypath属性,例如layer.cirnerRadius

纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性.      css3给我们带来了很多视觉的感受和变化,以前的图片做的事情,很多代码都能实现. 下面给大家简单介绍两种最为常见的圆角边框和盒子阴影,同时附上一个iphone 手机效果,提供大家练习. 1.border-radius 圆角矩形  语法格式: border-radius:  水平半径/垂直半径   只不过我们平时都把后面的这个垂直半径给省略了.  

css3实现input输入框颜色渐变发光效果代码

  给边框实现单击颜色渐变效果,这并不是单纯的box-shadow属性而已,它的发光是像四周均匀发光,它还包含一个缓慢发光过渡效果. 在继续学习之前,你必须要有一些Css3的基础知识.做出这一切需要你了解CSS3的Shadow和RGBa.Transition属性,否则就无法理解了. 1.制作发光边框文本框效果 代码如下: 然后我们要让这个input组件在被成为焦点(点击)时向四周发光,显示为蓝色,我只需添加一段CSS代码: 代码如下: sdw:focus{ transition:border l

CSS3实例教程:盒模型添加阴影属性box

文章简介:我们要对盒模型添加阴影怎么办呢?其实它的用法与text-shadow用法一样,只不过属性名称是box-shadow. 我们要对盒模型添加阴影怎么办呢?其实它的用法与text-shadow用法一样,只不过属性名称是box-shadow. 相关文章:CSS3教程:网页文字阴影属性text-shadow box-shadow: 此属性与text-shadow一样有4个值,前两个值分别表示水平方向位移距离和垂直方向的位移距离,第三个值表示阴影的模糊半径(包含0及以下的值均表示无模糊),最后一个

IE里button设置border:none属性无效解决方法

 本文说明了IE设置border:none属性无效的解决方法,下面给出了二种方法,可以根据情况参考使用 某个元素设置无边框,只需要给元素设置border:none即可,当然设置border:0效果一样,但实际上两者是有性能差别的  代码如下: border:none:边框设置为为none,不做任何处理: border:0:边框宽度设置为0像素,但是实际上border-color和border-style还是在渲染的.   然而在IE中,对于button和input元素确并不是这样,在IE6,7中

CSS颜色及背景属性

css 颜色语法:  color: <颜色> 初始值:  由浏览器决定 适用于:  所有对象 向下兼容:  是 颜色属性允许网页制作者指定一个元素的颜色.查看单位可以知道颜色值的描述. 一些颜色规则的例子包括: H1 { color: blue }H2 { color: #000080 }H3 { color: #0c0 }为了避免与用户的样式表之间的冲突,背景和颜色属性应该始终一起指定. 背景颜色语法:  background-color: <值> 允许值:  <颜色>