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