关于CSS中border的问题_百度知道
关于CSS中border的问题
850px页面中的代码:2CSS中的代码:#CCC}不管怎么设置border都没有效果;&lt:#ccc:&&#47,不知道问题出在哪;p&其它的样式也一样;div&p&banner&&&border:#banner {fdb4e1&lt:200div id=&/height
...没有边线..
另调用没有错误...换了颜色也是一样的.
提问者采纳
&/css& rel=&;banner&text/head&body&style type=& border：&css/&#47:200px.css&没有;css&div id=&div&gt:850style&p&&link href=&stylesheet&quot:#CCC } --&/& / 是否&lt:2&&p&&&gt:#style type=& &text/&&lt这样设置没有问题&/&lt!--#banner { css&
type=&text/ fdb4e1 &lt？如果是调用css的话是不是没有调用到如; height
提问者评价
然来是 solid 后面不用:号... 看你写的最多分给你了
其他类似问题
按默认排序
其他1条回答
2 还有最重要的一点是你的疏忽所致吧:#CCC 这个div的背景颜色已经一样了:#ff0000:2px solid，当然看不出效果了楼主怎么会这么不小心呢，看你写下的代码不像是初学者啊:2px solid # 将原冒号改为空格： background： border。呵~ 改其中任意一个看下:#ccc：改为; 这句存在代码错误:#ccc：border:#边框颜色与background:2px solid， border
您可能关注的推广回答者：回答者：
border的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁巧用CSS的Border属性制作特效菜单CSSHTML教程 许多应用软件的主菜单都具有这样的效果，通常是暗色的，一旦鼠标移到菜单上，立即变明亮；鼠标不在菜单上时是平面的，一旦鼠标移到菜单上，菜单条立即变为立体，从而增强了菜单的效果。你是否也想使网页中的导航菜单产生这种迷人的效果？ 上面这种菜单效果的
许多应用软件的主菜单都具有这样的效果，通常是暗色的，一旦鼠标移到菜单上，立即变明亮；鼠标不在菜单上时是平面的，一旦鼠标移到菜单上，菜单条立即变为立体，从而增强了菜单的效果。你是否也想使网页中的导航菜单产生这种迷人的效果？& 　　上面这种菜单效果的制作思路是这样的：利用CSS属性可以动态改变的特点，我们先定义两组CSS，一组是鼠标不在菜单上的CSS，另一组是鼠标在菜单上用的CSS。再在onmouseover和onmouseout事件中分别调用不同的CSS就能实现本例的效果了。下面讲具体的制作方法：& 　　1、先作一个1*4的表格，在表格中填入菜单名称并设置好链接；& 　　2、为了使菜单产生立体效果，实际上只要把菜单的上边框线和左边框设置为白色，右边框线和下边框线设置为黑色，就能产生立体效果了。在3中按F7（或点击快速启动栏里那个象“八卦图”似的图标），调出CSS面板，选择“none”，再点击面板下部的编辑图标，在弹出的“Edit&Style&Sheet”对话框上按“New”按钮，在弹出的“New&Style”对话框中选择“Make&Custom&Style&(class)”后，在下面的“Name”输入框中输入“.menustyle1”(也就是给要定义的class取个名字，注意前面那个小点不要漏了），按OK，立即弹出“Style&Definition&for&menustyle1”对话框，这时就开始定义CSS的“style1”了。在左边的选择窗口中选择“Border”，在右边的面板上定义（也是选择），在“style”属性中选择“solid(实线)”；在“Top”中输入“1”；然后把“Top”“left”的颜色定义为“#FFFFFF”（白色），“bottom”“right”的颜色定义为“#000000”（黑色）。到此，“menustyle1”已全部定义好，按OK返回，在“Edit&Style&Sheet”对话框上按“Done”按钮结束。我们再用同样的方法定义一个“menustyle2”的CSS，在鼠标移开时用，定义的方法相同，只是在定义边框线颜色时，把四条边框线的颜色取与菜单背景相同的颜色。在这里顺便讲一下，直接把边框线的宽度设置为“0”，也能达到类似的效果，但整个页面要抖动一下，效果不好。& 　　3、为了达到整个菜单条在通常是暗色，鼠标在上面时是明亮色的效果，要设置两个CSS的alpha滤镜，menustyle3和menustyle4，在Dreamweaver中设置CSS滤镜在方法上与一般的CSS设置相同（具体可参看“CSS滤镜”专题），只是“alpha”滤镜的参数较多，其实在这里只要其中的一个参数就行了，我在这里给出CSS代码，直接加在〈head〉和〈/head〉之间也行。CSS全部设置好后，在〈head〉和〈/head〉之间可见到这样的代码：& 〈style&type="text/css"〉& 〈!--& .menustyle1&{&border:&&border-width:&1px&1px&1px&1&border-color:&#FFFFFF&#0000&#FFFFFF}& .menustyle2&{border:border-width:1border-color:#}& .menustyle3&{filter:alpha(opacity=60)}& .menustyle4&{filter:alpha(opacity=100)}& .& --〉& 〈/style〉& 　　4、CSS都做好了，下面开始加载到相应的地方去。我们在源代码中找到第一个菜单项所在的“〈td〉”，在其中加上这样一行代码：onmouseover="this.className='menustyle1'"&onmouseout="this.className=&'menustyle2'"&class="menustyle2"，这行代码的作用是当鼠标在这个菜单上时，使用menustyle1定义的格式，当鼠标移开时使用menustyle2定义的格式，后面那个class="menustyle2"的作用是当前面两个事件都没有发生时，仍使用menustyle2格式，从而保证了菜单的一致性。对其它菜单项同样也加上这行代码。这样菜单项就能随着鼠标的移动而从立体、平面之间相互转换了。& 　　5、在表格的〈table〉标记中加上这样一行代码：onmouseover="this.className='menustyle4'"&onmouseout="this.className='menustyle3'"&class="menustyle3"，这行代码的作用与上面类似，只是这里改变的是透明度，从视觉上产生一种明暗程度相互转换的效果。& 　　到此，制作全部结束，按F12看看效果吧！用Dreamweaver3自动生成的CSS代码稍多一点，若对CSS熟悉的话，可直接编写，不是用Dreamweaver的网友，也可以把代码直接加在相应的位置即可。本例旨在抛砖引玉，提出一种方法思路，关键在于灵活应用，就可做出许多特殊效果来，如把菜单项由文本换成图象，效果将大不一样；把边框线的颜色改一下，就可获得象Dreamweaver主菜单那样，当鼠标在菜单项上时，产生凹下去的效果。搜索相关文章：(责任编辑：admin)顶一下(0)0%踩一下(0) 0%
------分隔线----------------------------上一篇： 下一篇：
发表评论评价:中立好评差评
发表评论 最新评论
新标准的熟悉和入门内容： 还在用 HTML 编写文档？如果是的话，就不符合当前标准了。2...
海蓝（navy blue）是最为大众所接受的颜色之一。采用这种颜色的色彩组合可解释成可靠...
HoTMetal中使用Javascript 4. 怎样编写文档格式的脚本 下面举个宏的例子：根据预定义...
HoTMetal中使用Javascript 5.怎样编写脚本来检查上次修改的日期 在本节教程中你将可以...
清除错误信息 清除错误信息在所有的编程语言中都是一个值得讨论的题目。通常它是一个...
使用Javascript代替CGI 你可能对CGI脚本比较熟悉，利用CGI你可以通过表单将数字或者变...CSS3实践之路(二): 颜色渐变(Gradient)和背景(Backgroud)_-IT行业第一站
CSS3实践之路(二): 颜色渐变(Gradient)和背景(Backgroud)
标题：CSS3实践之路(二): 颜色渐变(Gradient)和背景(Backgroud)
1. 颜色 和 透明度
在CSS3中对颜色进行了很多扩展,具体详情可参照官网：www.w3.org/TR/2003/CR-css3-color-，下面说下CSS3中新的数字定义颜色的方法。
相信大家以前定义颜色经常使用RGB，
RGB色彩模式（也翻译为“红绿蓝”，比较少用）是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。
RGBA在RGB的基础上多了控制alpha透明度的参数。以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A参数，取值在0~1之间，不可为负值。
例如：background-color:rgba(192,192,192,0.5),用RGBA定义颜色不能像RGB一样使用HEX value（#c0c0c0）。
1.2 HSL && HSLA
HSL色彩模式是工业界的一种颜色标准，是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，HSL即是代表色调，饱和度，亮度三个通道的颜色。
语法：hsl(hue, saturation, lightness, alpha).
说明：Hue(色调)，取值范围为：（0-360，） 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其它颜色；Saturation （饱和度）的值形式为百分比（0%：gray ，100%：full color）；Lightness （亮度）值形式也为为百分比（0%：black，100%：white）；Alpha（透明度）的取值（0 -1）。
实例：background-color:hsl(120,65%,75%);background-color:hsla(120,65%,75%,0.3);
1.3 Opacity
用来定义元素的透明度，取值范围（0 - 1），其实这种特性，浏览器早就支持了。
例如：opacity:0.5，但IE8和IE之前版本要这么写 filter:Alpha(opacity=50)，运用IE所特有的滤镜。
在CSS3中背景增加了background-size，background-origin，background-clip三个新特性，下面来依次讲解这三个特性：
2.1 background-size
指定背景图像的大小，
语法：background-size:&length|percentage|cover|
Description
用数值来设定图片的宽度和高度,第一个值为宽度,第二个值为高度,如果只设定一个值,那第二个被设为auto.
percentage
用百分比来设定图片的宽度和高度,第一个值为宽度,第二个值为高度,如果只设定一个值,那第二个被设为auto.
以图片自身的尺寸比例来拉伸图片以封满某个元素.
以图片自身的尺寸比例来拉伸或缩小图片以但某个元素能完全显示此图片
background-image:url('Images/smiley.gif');
&&&&background-repeat:no-repeat;
&&&&background-size:60px&30px;
background-size:60px 30
background-size:
background-size:
2.2 background-origin
指定背景显示的区域。
语法：background-origin: padding-box|border-box|content-
Description
padding-box
背景图片从padding区域开始显示
border-box
背景图片从border区域开始显示
content-box
背景图片从content区域开始显示
&&&&width:200px;height:100px;padding:10px&20px;border:5px&orangedotted;
&&&&background-image:url('Images/smiley.gif');
&&&&background-repeat:no-repeat;
&&&&background-position:left⊤
&&&&background-origin:content-
The background-origin property specifies what the background-position property should be relative to.
2.3 background-clip
指定背景画布开始的区域
语法：background-clip: border-box|padding-box|content-
Description
border-box
从border区域开始裁剪背景
padding-box
从padding区域开始裁剪背景
content-box
从content区域开始裁剪背景
&&&&width:250px;height:100px;padding:10px&20px;border:10px&orangedotted;
&&&&background-color:#CCCC00;
&&&&background-image:url('Images/smiley.gif');
&&&&background-repeat:no-repeat;
&&&&&background-position:left⊤
&&&&background-clip:content-
The background-clip property is supported IE9+, Firefox 4+, Opera, and Chrome.
3 渐变(Gradients)
渐变是一种应用于平面的视觉效果，可以从一种颜色逐渐地转变成另外一种颜色，故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方。
我们做网页一般用图片来做渐变效果，这是个比较好的方法，用图片就不用考虑浏览器兼容性问题了，但在这里我来讲用CSS3来写渐变，目前有webkit核心，moz核心完整支持渐变效果，最新Opera浏览器（11.52）和IE核心支持CSS（用滤镜）也支持线性（liner）渐变。
3.1 各浏览器渐变语法和说明
首先来讲讲webkit核心的浏览器，
参考网址：http://www.webkit.org/blog/1424/css3-gradients/
语法：-webkit-gradient(type, start_point, end_point, / stop...)
-webkit-gradient(type, inner_center, inner_radius, outer_center, outer_radius, / stop...)
Description
渐变的类型，可以是线性渐变(linear)或是径向渐变(radial)，由此而来的另外两种渐变写法：-webkit-linear-gradient和-webkit-radial-gradient，大家一般都习惯这种写法
start_point
渐变图像中渐变的起始点
渐变图像中渐变的结束点
color-stop()方法，指定渐变进程中特定的颜色
inner_center
内部中心点，径向渐变起始圆环
inner_radius
内部半径，径向渐变起始圆
outer_center
外部渐变结束圆的中心点
outer_radius
外部渐变结束圆的半径
webkit核心的浏览器还定义了新的渐变规则：-webkit-repeating-linear-gradient()、-webkit-repeating-radial-gradient（），有兴趣的朋友可以去上面网址里去查看。
接下来说说moz核心的，参考网址：https://developer.mozilla.org/en/Using_gradients
线性渐变语法：-moz-linear-gradient( [&point& || &angle&,]? &stop&, &stop& [, &stop&]* )
说明：起点的工作方式类似于background position。可以设置水平和垂直位置为百分比，或以像素为单位，或在水平方向上可以使用left/center/right，在垂直方向上可以使用top/center/bottom。位置起始于左上角。如果你不指定水平或垂直位置，它将默认为center，
例如：-moz-linear-gradient(left 20deg, black, white)。
径向渐变语法：-moz-radial-gradient([&bg-position& || &angle&,]? [&shape& || &size&,]? &color-stop&, &color-stop&[, &color-stop&]*);
说明：与线性渐变工作类似，径向渐变允许指定渐变的形状（圆形circle 或椭圆形ellipse ）和大小（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）。例如：
-moz-radial-gradient(45px 45px, ellipse farthest-corner, aqua 0%, rgba(0, 0, 255, 0) 100%, blue 95%)
再来说说在Opera浏览器中怎么定义渐变，有兴趣的同学可以参考以下网址：
/articles/view/css3-linear-gradients/
/articles/view/css3-radial-gradients/
语法和说明和以上两种浏览器定义差不多，这里就不在进行说明了，例如：-o-linear-gradient(top left,rgba(100,100,100,1),rgba(100,100,100,0.5))。
最后讲讲IE的渐变是怎么样定义的，在IE可使用滤镜Filter,参考网址：/en-us/library/ms532997(VS.85,loband).aspx，
语法：filter:progid:DXImageTransform.Microsoft.Gradient(sProperties)
Description
设定是否进行渐变
以颜色名称(red)设定最终颜色(不透明)
EndColorStr
以字符形式(#FF000000&to&#FFFFFFFF)设定最终颜色
GradientType
设定渐变的方向( 1：horizontal gradient、
0： vertical gradient.默认为：0)
StartColor
以颜色名称(red)设定开始颜色(不透明)
StartColorStr
以字符形式(#FF000000&to&#FFFFFFFF)设定开始颜色
例如：filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1)，大家可能注意到在IE下利用滤镜没法做径向渐变，颜色也只能设置开始和结束，不如webkit和moz设置那么灵活，相信IE下个版本会进行这方面的升级，改用标准的CSS的写法。&&&&
3.2 实例说明
先说明线性实例，这在IE也能实现
width:130px;height:130px;border:1px&solid&green;padding:10px;
&background:
-webkit-linear-gradient(left,red,white);
&background:-moz-linear-gradient(0deg,red,#fff);
&filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=white,gradientType=1);
&background:
-o-linear-gradient(red,white);
&width:130px;height:130px;border:1px&solid&#e4c700;padding:10px;
&background:
-webkit-linear-gradient(45deg,white,#00c9ff&50%,purple&50%,white);
&background:-moz-linear-gradient(45deg,white,#00c9ff&50%,purple&50%,white);
&background:-o-linear-gradient(45deg,white,#00c9ff&50%,purple&50%,white);
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,
StartColorStr='#FF0099CC',
EndColorStr='#');
第二个line2在webkit和moz中定义了四种颜色，并45度渐变。
接下来是径向实例，这是个球,请在webkit 和 moz中查看：
&&&&width:200px;height:200px;
border-radius: 50%;
&&&&background:
-webkit-radial-gradient(30%&30%,white,black);
&&&&background:
-moz-radial-gradient(30%&30%,white,black);
style=&background:
style=&background:
-webkit-radial-gradient(white,white&30%,rgba(255,255,255,0)50%);
&&&&background:
-moz-radial-gradient(white,white&30%,rgba(255,255,255,0)50%);
&&&&&&&&&&&&padding:10px&0px&10px&10px;&&
&&&&&h1&Spotlight
On: Gradients&/h1&
RGBA Colors&/h3&
Spotlight On: Gradients
Using RGBA Colors
接下来说下在webkit下特有的重复渐变：
-webkit-repeating-radial-gradient(top left, circle, #CCFFCC, #33CCCC 10%, #%);-o-repeating-linear-gradient(20deg,#CCFFCC,#33CCCC 20px);
接下来说下在moz中特有的背景图片渐变：
-moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), url('Images/transparent.png');
最后展现我在这个系列中第一篇文章中的水晶按钮，加上我进一步对渐变的理解，改进成为跨所有浏览器（最新的）的水晶按钮。
input.css3btn{
&&background:
-moz-linear-gradient(270deg,#d2ebf8,#0c8ab5);
&&background:
-webkit-linear-gradient(top,#d2ebf8,#0c8ab5);
&&background:
-o-linear-gradient(top,#d2ebf8,#0c8ab5);
&&filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,
StartColorStr='#000099CC',
EndColorStr='#FF0087B4');
&&border-top:1px&solid&#38538c;
&&border-right:1px&solid&#1f2d4d;
&&border-bottom:1px&solid&#151e33;
&&border-left:1px&solid&#1f2d4d;
&&border-radius:4px;
&&box-shadow:inset&0&1px&10px&1px&#5c8bee,0px&1px&0&#1d2c4d,0&2px&0px&#1f3053,0&4px&4px&1px𛈇
&&color:#f0f0f0;
&&font:bold&20px&&helvetica
neue&,helvetica,arial,sans-serif;
&&padding:10px&0&10px&0;
&&text-align:center;
&&text-shadow:0px&-1px&1px&#1e2d4d;
&&width:150px;
&&&background-clip:
padding- }
&&input.css3btn:hover
&&&&box-shadow:inset&0&0px&20px&1px&#87adff,0px&1px&0&#1d2c4d,0&3px&0px&#1f3053,0&4px&4px&1px𛈇
&&&&cursor:pointer;
&&input.css3btn:active
&&&&box-shadow:inset&0&1px&10px&1px&#5c8bee,0&1px&0&#1d2c4d,0&2px&0&#1f3053,0&4px&3px&0𛈇
&&&&margin-top:1px;
其实这水晶按钮还可以加上些文字特效会更好，关于CSS3的文字特效将在下一章讲解。
延伸阅读：
热门搜索：
特色栏目：
类别推荐：css中border的属性_百度知道
css中border的属性
css中boder的颜色、厚度、宽度、高度怎么设置
提问者采纳
设置上右下左边框的宽度border-color:1px solid #000;
设置上右下左边框的颜色border-top:
设置下边框的样式宽度及颜色border-left:1px solid #000;
设置上边框的样式宽度及颜色border-
设置右边框的样式宽度及颜色border-bottom:1px solid #000:1px solid #000:#000;
可同时设置上右下左的边框的样式宽度及颜色border-style:1px 2px 3px 4
设置上右下左边框的样式border-widthborder:1px solid #000
其他类似问题
按默认排序
其他1条回答
oder，solid代表边框的样式类型，1px是边框宽度，还可以是dotted和dashed的虚线，red是颜色红色。没有你说的厚度:1可以写在一起
您可能关注的推广
border的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁热门关键词： |
当前位置： >
CSS3边框-边框颜色(border-color)
浏览：次 来源：未知
日期： 14:51:15 评论：
CSS3提供了新的边框 ，其中，有圆形边框，边框的颜色也是非常有趣。 Mozila / Firefox已经支持该特性，你可以创造很酷的边框。请看一个例子：
在Mozilla浏览器/ Firefox中效果为:显示一灰色的边框
该效果CSS3代码如下:
border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #
-moz-border-top-colors:
#555 #666 #777 #888 #999 #aaa #bbb #
-moz-border-left-colors:
#555 #666 #777 #888 #999 #aaa #bbb #
-moz-border-right-colors:
#555 #666 #777 #888 #999 #aaa #bbb #
padding: 5px 5px 5px 15
再看一个例子:
在Mozilla浏览器/ Firefox中效果为:显示一褪红色边框
呵呵,本页两例中的效果匀在在Mozilla/ Firefox浏览器中显示的效果.在IE下可不支持哦!!!
相关热词搜索：
赞助商链接