立体线条边框的变化 下面是一段可以改变立体线条边框形状、粗细、颜色和框内背景颜色的代码: <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(肉红色) |
评论