怎么给窗体添加阴影呢

以利亚先生丶 · 发表于 2013-5-9 21:45:01

我看了看 outline是添加阴影的属性。。
可是我试了试，，没发给窗体增加上。。只能给窗体里的文字等增加上。
谢谢，，帮忙。

import win.ui;
/*DSG{{*/
var mainForm = ..win.form( bottom=586;right=924;border="none";text="HTMLayout - 无边框窗口" )
mainForm.add( )
/*}}*/
import win.util.round;
win.util.round(mainForm,,,6,6); //窗体改成圆角,最后两个参数指定圆角半径
import web.layout;
import web.layout.behavior.windowCommand;
//创建网页浏览器
var wbLayout = web.layout( mainForm )
wbLayout.html = /**
<div #title-bar command="window-caption">
<div .buttons>
<a command="window-min">0</a>
<a command="window-max">1</a>
<a command="window-close">r</a>
</div>
</div>
<div style="behavior:windowSizer"/>
<li class = "link"><a>第一目录</a></li>
<li class = "link"><a>第二目录</a></li>
<li class = "link"><a>第三目录</a></li>
<li class = "link"><a>第四目录</a></li>
<li class = "link"><a>第五目录</a></li>
**/
wbLayout.css = /**
html{
background:#F8F8F8;
border-radius:4px; /*8像素大小的圆角*/
html-shadow: black 2px 2px 12px 2px;
}
li.link{
behavior:windowCommand;/*添加交互行为:windowCommand*/
width:10em;
height:21px; /*高度36像素,px表示单位为像素*/
background:#EAEAEA; /*背景色*/
text-indent: 1em;
border-style: solid;
border-top-width: thin;
border-top-color: #CCCCCC;
border-bottom-width: thin;
border-bottom-color: #000000;
}
li.link:hover{
background:#999;/*鼠标移到节点上改变背景色*/
}
#title-bar{
behavior:windowCommand;/*添加交互行为:windowCommand*/
width:100%; /*宽度撑满窗口*/
height:100px; /*高度36像素,px表示单位为像素*/
background:#E9EDF1; /*背景色*/
}
#title-bar .buttons {
width:85px;/*宽度85像素*/
height:16px;/*高度16像素*/
flow:horizontal;/*内部水平布局横向排列按钮*/
position:absolute;/*使用绝对定位*/
right:2px;/*右边距2像素*/
top:0px;/*顶边距0像素*/
}
#title-bar a[command]{
display:block; /*显示为块模式,才能指定宽高*/
width:16px;/*宽度16像素*/
height:16px;/*高度16像素*/
font-family:"Marlett"; /*该字体显示按钮符号*/
padding:4px 2px 5px 4px;/*上右下左内边距*/
}
#title-bar a[command]:hover{
background:#ACE4FE;/*鼠标移到节点上改变背景色*/
}
#title-bar a[command="window-restore"]{
content:"2";/*自动转换到还原按钮时,改变内部文本为还原符号*/
}
**/
mainForm.show()
win.loopMessage();

复制代码

双书幻 · 发表于 2013-5-9 22:35:53

能不能加上我没试
但好像会很卡
http://www.softwareui.com/forum. ... &extra=page%3D1

万事发↑新一天 · 发表于 2013-5-9 22:41:47

请看看，要那个样式的

import win.ui;
/*DSG{{*/
var winform = ..win.form( bottom=399;parent=...;text="aardio Form";right=599 )
winform.add( )
/*}}*/
import web.layout;
import web.layout.behavior.tabs;
var wbLayout = web.layout(winform);
import web.layout.debug; //导入该库以显示HTMLayout错误
wbLayout.attachEventHandler( web.layout.debug ); //为CSSS!添加全局函数 debug;
wbLayout.html = /*********
<HTML>
<HEAD>
<TITLE>Tree view lines styling</TITLE>
<STYLE>
h1
{
font-size: 14pt;
}
h2
{
font-size: 12pt;
text-align:right;
}
p.block { width:max-intrinsic; margin: 20px; border:1px solid; background-color:white;}
p.trans-block { width:max-intrinsic; margin: 20px; background-color:transparent;}
p.white-block { width:max-intrinsic; margin: 20px; background-color:white;}
.dotted-outline
{
outline-offset:0px;
outline-color:red;
outline-width:3px;
outline-style:dotted;
}
.dashed-outline
{
outline-offset:0px;
outline-color:blue;
outline-width:3px;
outline-style:dashed;
}
ul.tree-lines > li
{
display: list-item;
list-style-type: tree-line;
outline-color:green;
outline-width:3px;
outline-style:dashed;
padding:2px;
}
.glow-outline
{
outline-color:dodgerblue;
outline-style:glow;
}
.shadow-outline
{
outline-color:silver;
outline-style:glow;
outline-shift:3px;
}
</STYLE>
</HEAD>
<BODY>
<h1>Plain outlines:</h1>
<p .block .dotted-outline style="outline-width:1px;">
Outline 1px, dotted
</p>
<p .block .dotted-outline style="outline-width:2px;">
Outline 2px, dotted
</p>
<p .block .dotted-outline style="outline-width:3px;">
Outline 3px, dotted
</p>
<p .block .dashed-outline style="outline-width:3px;">
Outline 3px, dashed
</p>
<p .block .dashed-outline style="outline-width:4px;">
Outline 4px, dashed
</p>
<p .block .dashed-outline style="outline-width:5px;">
Outline 5px, dashed
</p>
<h1>Glow outlines:</h1>
<p .white-block .glow-outline style="outline-width:5px; outline-offset:0px">
Outline width:5px, offset:0px, glow
</p>
<p .white-block .glow-outline style="outline-width:3px; outline-offset:2px">
Outline width:3px, offset:2px, glow
</p>
<p .white-block .glow-outline style="outline-width:1px; outline-offset:4px">
Outline width:1px, offset:4px glow
</p>
<p .trans-block .glow-outline style="outline-width:1px; outline-offset:3px; color:white">
Outline width:1px, offset:3px, glow, no solid background
</p>
<h1>Shadow (glow with shift) outlines:</h1>
<p .block .shadow-outline style="outline-width:5px; outline-offset:0px">
Outline width:5px, offset:0px, glow
</p>
<p .block .shadow-outline style="outline-width:3px; outline-offset:2px">
Outline width:3px, offset:2px, glow
</p>
<p .block .shadow-outline style="outline-width:1px; outline-offset:3px">
Outline width:1px, offset:3px glow
</p>
<p .trans-block .shadow-outline style="outline-width:2px; outline-offset:0px;">
Outline width:2px, offset:0px, glow, no solid background
</p>
<h1>Outlines of list-style-type:tree-line elements:</h1>
<div style="flow:horizontal">
<h2>LTR:</h2>
<ul .tree-lines #ltr>
<li>First</li>
<li>Second<br/>(spans two lines)</li>
<li>Third</li>
<li>Fourth</li>
</ul>
<h2>RTL:</h2>
<ul .tree-lines dir="rtl" #rtl>
<li>First</li>
<li>Second<br/><span dir=ltr>(spans two lines)</span></li>
<li>Third</li>
<li>Fourth</li>
</ul>
</div>
</BODY>
</HTML>
*********/
wbLayout.onButtonClick = function (ltTarget,ltEle,reason,behaviorParams) {
}
winform.show();
win.loopMessage();

复制代码

roger · 发表于 2013-5-9 22:56:10

用半透明的PNG做阴影简单速度快，别搞那么多花样。

以利亚先生丶 · 发表于 2013-5-9 23:07:22

双书幻发表于 2013-5-9 22:35
能不能加上我没试
但好像会很卡
http://www.softwareui.com/forum.php?mod=viewthread&tid=48&extra=page ...

我之前一加。。就黑了。。以为是我自己弄错了

以利亚先生丶 · 发表于 2013-5-9 23:08:03

roger 发表于 2013-5-9 22:56
用半透明的PNG做阴影简单速度快，别搞那么多花样。

嗯。。好的。

jk366 · 发表于 2013-5-10 08:54:50

以前试过css窗体阴影，非常卡，建议做个png阴影图片,做背景。

以利亚先生丶 · 发表于 2013-5-10 14:57:24

jk366 发表于 2013-5-10 08:54
以前试过css窗体阴影，非常卡，建议做个png阴影图片,做背景。

嗯。谢谢建议。

		自动登录	找回密码
密码			注册会员