仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 741|回复: 8
打印 上一主题 下一主题

[DIV+CSS] CSS教程之CSS3教程(3):border-color网页边框色采

[复制链接]
再现理想 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:05:20 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
另外如果你不是javascrput的高手,你可以不必去写ID,只用class就可以。当客户端程序员写完程序,需要调整时候,你可以在利用他的ID进行控制。
如今我们来看一看怎样为边框的border-color增加更多的色采。
上一篇先容了:CSS3教程(2):网页边框半径和网页圆角
利用CSS3的border-radius属性,假如你设置了border的宽度是Xpx,那末你就能够在这个border上利用X种色彩,每种色彩显现1px的宽度。假如说你的border的宽度是10个像素,可是只声了然5或6中色彩,那末最初一个色彩将被增加到剩下的宽度。
扫瞄器兼容性

今朝只要Firefox撑持CSS3border-colour属性,以是我们这里只需利用-moz前缀。
一切本系列关于CSS3的文章城市实时更新,以跟踪扫瞄器的兼容性。
CSS3中的边框色彩


这里是一个10px宽的尺度边框和边框色彩:
  1. #borderColor{border:10pxsolid#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:15px25px;height:inherit;width:590px;}
复制代码
扫瞄器撑持:


  • FireFox(3.0.5)
  • GoogleChrome(1.0.154+)
  • GoogleChrome(2.0.156+)
  • InternetExplorer(IE7/IE8RC1)
  • Opera(9.6)
  • Safari(3.2.1,Windows)
有圆角的边框色彩

  1. #borderColorCorner{border:10pxsolid#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:15px25px;height:inherit;width:590px;}
复制代码
扫瞄器撑持:


  • FireFox(3.0.5)
  • GoogleChrome(1.0.154+)
  • GoogleChrome(2.0.156+)
  • InternetExplorer(IE7/IE8RC1)
  • Opera(9.6)
  • Safari(3.2.1,Windows)

网上冲浪无论你用InternetExplorer还是NetscapeNavigator,几乎随时都在与CSS打交道,在网上没有使用过CSS的网页可能不好找。
小女巫 该用户已被删除
沙发
发表于 2015-1-18 05:12:24 | 只看该作者
还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
灵魂腐蚀 该用户已被删除
板凳
发表于 2015-1-24 15:31:02 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
爱飞 该用户已被删除
地板
发表于 2015-2-2 06:03:30 | 只看该作者
技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。
愤怒的大鸟 该用户已被删除
5#
发表于 2015-2-7 18:05:53 | 只看该作者
Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
谁可相欹 该用户已被删除
6#
发表于 2015-2-22 22:43:05 | 只看该作者
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。
因胸联盟 该用户已被删除
7#
发表于 2015-3-7 05:43:38 | 只看该作者
使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
飘飘悠悠 该用户已被删除
8#
发表于 2015-3-14 14:56:40 | 只看该作者
是当我和赵丽芬崔明艳老师进行交流后,很快就了解了还不太清楚的内容和并不了解的知识(像布局表格、绘制布局单元格等)。
海妖 该用户已被删除
9#
发表于 2015-3-21 12:19:48 | 只看该作者
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-6-14 09:30

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表