搜索
查看: 5840|回复: 7

[HTML] 怎么给窗体添加阴影呢

[复制链接]

27

主题

116

帖子

787

积分

三级会员

Rank: 4

积分
787
发表于 2013-5-9 21:45:01 | 显示全部楼层 |阅读模式
我看了看 outline是添加阴影的属性。。
可是我试了试,,没发给窗体增加上。。只能给窗体里的文字等增加上。
谢谢,,帮忙。
  1. import win.ui;
  2. /*DSG{{*/
  3. var mainForm = ..win.form( bottom=586;right=924;border="none";text="HTMLayout - 无边框窗口" )
  4. mainForm.add(  )
  5. /*}}*/

  6. import win.util.round;
  7. win.util.round(mainForm,,,6,6); //窗体改成圆角,最后两个参数指定圆角半径
  8. import web.layout;
  9. import web.layout.behavior.windowCommand;

  10. //创建网页浏览器
  11. var wbLayout = web.layout( mainForm )

  12. wbLayout.html = /**
  13. <div #title-bar command="window-caption">  
  14.     <div .buttons>
  15.         <a command="window-min">0</a>
  16.         <a command="window-max">1</a>
  17.         <a command="window-close">r</a>
  18.     </div>
  19. </div>

  20. <div style="behavior:windowSizer"/>  

  21. <li class = "link"><a>第一目录</a></li>
  22. <li class = "link"><a>第二目录</a></li>
  23. <li class = "link"><a>第三目录</a></li>
  24. <li class = "link"><a>第四目录</a></li>
  25. <li class = "link"><a>第五目录</a></li>
  26. **/

  27. wbLayout.css = /**
  28. html{
  29.         background:#F8F8F8;
  30.     border-radius:4px; /*8像素大小的圆角*/
  31.     html-shadow: black 2px 2px 12px 2px;

  32. }
  33. li.link{
  34.     behavior:windowCommand;/*添加交互行为:windowCommand*/
  35.     width:10em;
  36.     height:21px; /*高度36像素,px表示单位为像素*/
  37.     background:#EAEAEA; /*背景色*/
  38.     text-indent: 1em;
  39.            border-style: solid;
  40.           border-top-width: thin;
  41.           border-top-color: #CCCCCC;
  42.           border-bottom-width: thin;         
  43.           border-bottom-color: #000000;
  44. }

  45. li.link:hover{
  46. background:#999;/*鼠标移到节点上改变背景色*/
  47. }
  48. #title-bar{
  49.     behavior:windowCommand;/*添加交互行为:windowCommand*/
  50.     width:100%; /*宽度撑满窗口*/
  51.     height:100px; /*高度36像素,px表示单位为像素*/
  52.     background:#E9EDF1; /*背景色*/
  53. }  
  54. #title-bar .buttons {
  55.     width:85px;/*宽度85像素*/
  56.     height:16px;/*高度16像素*/
  57.     flow:horizontal;/*内部水平布局横向排列按钮*/
  58.    
  59.     position:absolute;/*使用绝对定位*/
  60.     right:2px;/*右边距2像素*/
  61.     top:0px;/*顶边距0像素*/
  62. }

  63. #title-bar a[command]{
  64.     display:block; /*显示为块模式,才能指定宽高*/
  65.     width:16px;/*宽度16像素*/
  66.     height:16px;/*高度16像素*/
  67.     font-family:"Marlett"; /*该字体显示按钮符号*/
  68.     padding:4px 2px 5px 4px;/*上右下左内边距*/   
  69. }
  70. #title-bar a[command]:hover{
  71.     background:#ACE4FE;/*鼠标移到节点上改变背景色*/
  72. }
  73. #title-bar a[command="window-restore"]{
  74.     content:"2";/*自动转换到还原按钮时,改变内部文本为还原符号*/
  75. }
  76. **/

  77. mainForm.show()
  78. win.loopMessage();
复制代码
回复

使用道具 举报

16

主题

186

帖子

1404

积分

四级会员

Rank: 6Rank: 6

积分
1404
发表于 2013-5-9 22:35:53 | 显示全部楼层

能不能加上我没试 但好像会很卡 [url]http://www.softwareui.com/forum.php?mod=viewthread&tid=48

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

使用道具 举报

8

主题

97

帖子

635

积分

三级会员

Rank: 4

积分
635
发表于 2013-5-9 22:41:47 | 显示全部楼层

请看看,要那个样式的[code]import win.ui; /*DSG{{*/ var winform = ..win.form( bottom=399;

请看看,要那个样式的
  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = ..win.form( bottom=399;parent=...;text="aardio Form";right=599 )
  4. winform.add(  )
  5. /*}}*/

  6. import web.layout;
  7. import web.layout.behavior.tabs;
  8. var wbLayout = web.layout(winform);

  9. import web.layout.debug; //导入该库以显示HTMLayout错误
  10. wbLayout.attachEventHandler( web.layout.debug ); //为CSSS!添加全局函数 debug;

  11. wbLayout.html = /*********
  12. <HTML>
  13.         <HEAD>
  14.                 <TITLE>Tree view lines styling</TITLE>
  15.         <STYLE>
  16.     h1
  17.     {
  18.       font-size: 14pt;
  19.     }
  20.     h2
  21.     {
  22.       font-size: 12pt;
  23.       text-align:right;
  24.     }
  25.    
  26.     p.block { width:max-intrinsic; margin: 20px; border:1px solid; background-color:white;}
  27.     p.trans-block { width:max-intrinsic; margin: 20px; background-color:transparent;}
  28.     p.white-block { width:max-intrinsic; margin: 20px; background-color:white;}
  29.    
  30.     .dotted-outline
  31.     {
  32.       outline-offset:0px;
  33.       outline-color:red;
  34.       outline-width:3px;
  35.       outline-style:dotted;
  36.     }
  37.     .dashed-outline
  38.     {
  39.       outline-offset:0px;
  40.       outline-color:blue;
  41.       outline-width:3px;
  42.       outline-style:dashed;
  43.     }
  44.   
  45.     ul.tree-lines > li
  46.     {
  47.       display: list-item;
  48.       list-style-type: tree-line;
  49.       outline-color:green;
  50.       outline-width:3px;
  51.       outline-style:dashed;
  52.       padding:2px;
  53.     }
  54.    
  55.     .glow-outline
  56.     {
  57.       outline-color:dodgerblue;
  58.       outline-style:glow;
  59.     }

  60.     .shadow-outline
  61.     {
  62.       outline-color:silver;
  63.       outline-style:glow;
  64.       outline-shift:3px;
  65.     }

  66.         
  67.         </STYLE>
  68.         </HEAD>
  69.         <BODY>
  70.         <h1>Plain outlines:</h1>
  71.   
  72.   <p .block .dotted-outline style="outline-width:1px;">
  73.     Outline 1px, dotted
  74.   </p>
  75.   <p .block .dotted-outline style="outline-width:2px;">
  76.     Outline 2px, dotted
  77.   </p>
  78.   <p .block .dotted-outline style="outline-width:3px;">
  79.     Outline 3px, dotted
  80.   </p>

  81.   <p .block .dashed-outline style="outline-width:3px;">
  82.     Outline 3px, dashed
  83.   </p>
  84.   <p .block .dashed-outline style="outline-width:4px;">
  85.     Outline 4px, dashed
  86.   </p>
  87.   <p .block .dashed-outline style="outline-width:5px;">
  88.     Outline 5px, dashed
  89.   </p>
  90. <h1>Glow outlines:</h1>
  91.   <p .white-block .glow-outline style="outline-width:5px; outline-offset:0px">
  92.     Outline width:5px, offset:0px, glow
  93.   </p>
  94.   <p .white-block .glow-outline style="outline-width:3px; outline-offset:2px">
  95.     Outline width:3px, offset:2px, glow
  96.   </p>
  97.   <p .white-block .glow-outline style="outline-width:1px; outline-offset:4px">
  98.     Outline width:1px, offset:4px glow
  99.   </p>
  100.   
  101.   <p .trans-block .glow-outline style="outline-width:1px; outline-offset:3px; color:white">
  102.     Outline width:1px, offset:3px, glow, no solid background
  103.   </p>

  104. <h1>Shadow (glow with shift) outlines:</h1>
  105.   <p .block .shadow-outline style="outline-width:5px; outline-offset:0px">
  106.     Outline width:5px, offset:0px, glow
  107.   </p>
  108.   <p .block .shadow-outline style="outline-width:3px; outline-offset:2px">
  109.     Outline width:3px, offset:2px, glow
  110.   </p>
  111.   <p .block .shadow-outline style="outline-width:1px; outline-offset:3px">
  112.     Outline width:1px, offset:3px glow
  113.   </p>
  114.   
  115.   <p .trans-block .shadow-outline style="outline-width:2px; outline-offset:0px;">
  116.     Outline width:2px, offset:0px, glow, no solid background
  117.   </p>

  118.   
  119.   <h1>Outlines of list-style-type:tree-line elements:</h1>
  120.   <div style="flow:horizontal">
  121.     <h2>LTR:</h2>
  122.     <ul .tree-lines #ltr>
  123.       <li>First</li>
  124.       <li>Second<br/>(spans two lines)</li>
  125.       <li>Third</li>
  126.       <li>Fourth</li>
  127.     </ul>
  128.     <h2>RTL:</h2>
  129.     <ul .tree-lines dir="rtl" #rtl>
  130.       <li>First</li>
  131.       <li>Second<br/><span dir=ltr>(spans two lines)</span></li>
  132.       <li>Third</li>
  133.       <li>Fourth</li>
  134.     </ul>
  135.   </div>
  136.         </BODY>
  137.   
  138. </HTML>

  139. *********/

  140. wbLayout.onButtonClick = function (ltTarget,ltEle,reason,behaviorParams) {
  141.        
  142. }

  143. winform.show()
  144. win.loopMessage();

  145.                           
复制代码
回复

使用道具 举报

8

主题

462

帖子

2551

积分

版主

Rank: 7Rank: 7Rank: 7

积分
2551
发表于 2013-5-9 22:56:10 | 显示全部楼层

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

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

使用道具 举报

27

主题

116

帖子

787

积分

三级会员

Rank: 4

积分
787
 楼主| 发表于 2013-5-9 23:07:22 | 显示全部楼层

[quote][size=2][color=#999999]双书幻 发表于 2013-5-9 22:35[/color] [url=forum.php?mod=

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

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

使用道具 举报

27

主题

116

帖子

787

积分

三级会员

Rank: 4

积分
787
 楼主| 发表于 2013-5-9 23:08:03 | 显示全部楼层

[quote][size=2][color=#999999]roger 发表于 2013-5-9 22:56[/color] [url=forum.php?mo

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

嗯。。好的。
回复

使用道具 举报

5

主题

17

帖子

138

积分

一级会员

Rank: 2

积分
138
发表于 2013-5-10 08:54:50 | 显示全部楼层

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

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

使用道具 举报

27

主题

116

帖子

787

积分

三级会员

Rank: 4

积分
787
 楼主| 发表于 2013-5-10 14:57:24 | 显示全部楼层

[quote][size=2][color=#999999]jk366 发表于 2013-5-10 08:54[/color] [url=forum.php?m

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

嗯。谢谢建议。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

手机版|未经许可严禁引用或转载本站文章|站长邮箱|aardio.com|aardio官方社区 ( 皖ICP备09012014号 )

GMT+8, 2020-10-31 00:27 , Processed in 0.093750 second(s), 22 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表