css扩展之@常量的用法(有边框样式边框背景图示例)

By admin at 2017-11-13 • 0人收藏 • 303人看过
<html>
<head>
<style>

@import url( definitions.css );

@const MY_BORDER_COLOR      : #AF0000;
@const MY_BORDER            : 3px solid #0000AF;
@const MY_SPECIAL_BORDER    : 3px dashed @MY_BORDER_COLOR;
@const MY_BORDER1, 
       MY_BORDER2           : 5px solid #00AFAF;

@const MY_BACKGROUND        : #AFAFFF;
@const MY_HATCH_BACKGROUND  : repeat url(sb-scroll-base.png);

/* this is an attempt to override value of MY_SUPER_BORDER that is defined in definitions.css
   this declaration *will not* override constant defined before - const is const by design  */
@const MY_SUPER_BORDER        : 1px solid #00FF00;

div
{
	border:2px solid @MY_BORDER_COLOR;
  margin:8px;
  padding:4px;
}

div#d2
{
	border: @MY_BORDER;
}

div#d3
{
	border: @MY_SPECIAL_BORDER;
}

div#d4
{
	background: @MY_BACKGROUND;
}

div#d5
{
	background: @MY_HATCH_BACKGROUND;
}

div#d6
{
  border: @MY_BORDER1;
	background: @MY_HATCH_BACKGROUND;
}

div#d7
{
  border: @MY_BORDER2;
	background: @MY_HATCH_BACKGROUND;
}

div#d8
{
  border: @MY_SUPER_BORDER;
}

body 
{
  background-color: antiquewhite;
}

</style></head>

<body>
<h1>@const demo</h1>
<div>
  this div shall have border of color #AF0000
</div>
<div id="d2">
  this div shall have border of color #0000AF
</div>
<div id="d3">
  this div shall have dashed border of color #AF0000
</div>
<div id="d4">
  this div shall have solid background of color #AFAFFF
</div>
<div id="d5">
  this div shall have solid transparent hatch background
</div>
<div id="d6">
  this div shall have solid transparent hatch background with border of color #00AFAF
</div>
<div id="d7">
  this div shall be identical to the one above
</div>
<div id="d8">
  this div shall have 6px dotted red border
</div>


</body>
</html>

blob.png

登录后方可回帖

登 录
信息栏
本站永久域名:HtmLayout.Cn
纯私人站,当笔记本用的,学到哪写到哪,目前正在学aardio+halcon机器视觉.
本 站 主 站:Stm32cube中文网
Aardio 官方站:Aardio官方
Aardio最新功能:Aardio官方更新日志
aardio在线手册Aardio在线手册
C大Aardio论坛:Aar爱好者论坛
简码教程网:简码编程
AARDIO语言QQ群:70517368
赞助商:才仁机械
下载站:非凡软件站
Loading...