天涯部落

小圈子,大声音!呼朋引伴网聚部落!

创建新部落?

《立体线条边框的变化》【网易】海珠儿作品(转载)

楼主:人间惆怅客SD 时间:2012-09-04 15:08:16 点击:835 回复:9
脱水模式给他打赏只看楼主 阅读设置


立体线条边框的变化



【转载】立体线条边框的变化 - 不是人间富贵花 - 生命载厚德故丰盈  心灵因大爱而高洁



下面是一段可以改变立体线条边框形状、粗细、颜色和框内背景颜色的代码:



日志文字



说明:


这段代码是在border-style后面使用不同的语法描述来改变边框形状的:


简单线形边框; Solid 简单双线边框; Double 沟线立体效果边框; Groove 脊线立体效果边框; Ridge 嵌入线立体效果边框; Inset 浮出线立体效果边框Outset



边框线条颜色的改变方法:


绿色处可改变边框的颜色,用英语单词表示也可,用#xxxxxx的形式表示也可.(见颜色值表)=》《颜色值表》



边框背景颜色的改变方法:


改变边框内背景颜色的方法就是在桃红色代码处改变颜色值。(可能随便填一个6位数的值,要想得到你想要的准确颜色就要参看“颜色值表”)



下面是将边框线条形状、粗细等改变后的效果:


1、简单线形边框: Solid 边框颜色为绿色 border-color: #00ff00


背景颜色为background-color:#ffdead(米黄色)


不是立体


日志文字
2、简单双线边框:Double 边框颜色为border-color: #0000FF


背景颜色为background-color: #44FFFF(天蓝色)


不是立体


日志文字

3、沟线立体效果边框:Groove 边框颜色为border-color: #ff0000 (红色) 背景颜色为background-color: #0000ff(蓝色)


日志文字


4、脊线立体效果边框:Ridge 边框颜色为border-color: #44ffff(天蓝色) 背景颜色为background-color: #ff0000(红色)


日志文字


5、嵌入线立体效果边框:Inset 边框颜色为border-color: #a000ff(紫色) 背景颜色为background-color: #a0ff60(黄绿色)


日志文字


6、浮出线立体效果边框:Outset 边框颜色为border-color: #ff00ff(桃红色) 背景颜色为background-color: #ffa0ff(肉红色)


日志文字


楼主人间惆怅客SD 时间:2012-09-04 15:19:35


转了【网易】海珠儿老师的一个技术贴,和大家共同学习研究。
作者 :枫叶Fs 时间:2012-09-04 20:24:49
  太好了,枫叶就是喜欢这样的地方,可以学习的地方。。。。
楼主人间惆怅客SD 时间:2012-09-04 23:01:59
  @枫叶FS          还要请枫叶老师大力支持。您的编辑风格很独特,愿意收我这个徒弟吗?
作者 :枫叶Fs 时间:2012-09-04 23:05:32
  呵呵!你过奖啦!枫叶也是赶鸭子上架呀,不过我希望我们互相学习哦。。。
楼主人间惆怅客SD 时间:2012-09-04 23:11:29
  @枫叶FS         枫叶老师,您太谦虚了,我绝不是恭维,您的编辑风格真的自成一体。我很佩服。
作者 :枫叶Fs 时间:2012-09-04 23:15:56
  谢谢!枫叶也学习编辑不久,能够让好友赞扬真的有点受宠若惊呀!
楼主人间惆怅客SD 时间:2012-09-05 00:11:41
  您太过谦了。以后还要多跟您学习呢。
作者 :星连193 时间:2012-09-05 12:29:47
  厉害啊。谢谢惆怅客。
楼主人间惆怅客SD 时间:2012-09-05 19:58:36
  @星连193         什么厉害。搬家的本事。哈哈。

相关推荐

    发表回复

    请遵守天涯社区公约言论规则,不得违反国家法律法规