注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

高山流水only

所有文字 皆于个人感情无关

 
 
 

日志

 
 

【转载】立体线条边框的变化  

2015-03-20 21:58:13|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自大海情怀《立体线条边框的变化》

 

 

立体线条边框的变化

 

立体线条边框的变化 - 大海情怀 - 大海情怀

 

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

 

<div STYLE="border-style:Groove;border-width:7pt; border-color: red"> <div style="width:100%;height:100%;background-color:#ffdead;">日志文字 </div></div>

 

说明:

这段代码是在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(肉红色)

日志文字

 

 立体线条边框的变化 - 大海情怀 - 大海情怀 立体线条边框的变化 - 大海情怀 - 大海情怀立体线条边框的变化 - 大海情怀 - 大海情怀

  评论这张
 
阅读(21)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017