CSS 其他属性

关于浏览器支持：若未特别标明则主流浏览器都支持，其中以 IE 作为重点关注（IE8以下不考虑）。

属性	描述	版本
cursor	规定要显示的光标的类型（形状）	CSS2
opacity	设置一个元素的透明度级别	CSS3
box-sizing	允许您为了适应区域以某种方式定义某些元素	CSS3
resize	定义元素是否可以改变大小	CSS3
content	与 :before 以及 :after 伪元素配合使用，来插入生成内容	CSS2
counter-increment	递增或递减一个或多个计数器	CSS2
counter-reset	创建或重置一个或多个计数器	CSS2
quotes	设置嵌套引用的引号类型	CSS2

cursor

cursor 属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。

值	描述
url	需使用的自定义光标的 URL。
auto	默认。浏览器设置的光标。
default	默认光标（通常是一个箭头）
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（北/西）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。

cursor:pointer;
cursor: url(http://xxxx.xxx/cursor.ico),auto;

自定义鼠标显示图标注意项

• 使用通用图片格式cur和icon，浏览器都支持。
• 鼠标图片的推荐尺寸是32*32。
• 图片地址为绝对路径。
• 在IE中容易与元素 title 和 alt 属性起冲突。

opacity

opacity 属性设置一个元素的透明度级别。
IE8和早期版本支持另一种过滤器属性。例：filter:Alpha(opacity=50)。

值	描述
value	指定不透明度。从0.0（完全透明）到1.0（完全不透明）

div{
  opacity:0.5;
  filter:Alpha(opacity=50);  /*IE8及早期版本*/
}

box-sizing

box-sizing 属性设置元素的 width,height 与 border,padding 的关系。

值	描述
content-box	默认值，元素边框和内边距不计于元素宽高内。
border-box	元素边框和内边距计于元素宽高内。

<style>
div{
  width:100px;
  height:100px;
  border:20px solid pink;
  padding:20px;
}
.div2{
  box-sizing:border-box;
}
</style>

<div>div1</div>
<div class="div2">div2</div>

resize

resize 属性指定一个元素是否是由用户调整大小的。

值	描述
none	用户无法调整元素的尺寸。
both	用户可调整元素的高度和宽度。
horizontal	用户可调整元素的宽度。
vertical	用户可调整元素的高度。

div{
  border:1px solid red;
  width:300px;
  resize:both;
  overflow:auto;
}

content

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。

值	描述
none	设置Content，如果指定成Nothing
normal	设置content，如果指定的话，正常，默认是"none"
counter	设定计数器内容
attr()	设置Content作为选择器的属性之一。
string	设置Content到你指定的文本
open-quote	设置Content是开口引号
close-quote	设置Content是闭合引号
no-open-quote	如果指定，移除内容的开始引号
no-close-quote	如果指定，移除内容的闭合引号
url()	设置某种媒体（图像，声音，视频等内容）

<style>
a:before {
  content:'进入';
  color:"red"
}
a:after {
  content:"("attr(href)")";
}
</style>
<a href="www.baidu.com">百度</a> 

显示结果：

counter-increment

counter-increment 属性递增一个或多个计数器值。
counter-increment 属性通常是和 counter-reset 属性，content 属性一起使用。

值	描述
none	没有计数器将递增
id number	id 定义将增加计数的选择器、id 或 class。number 定义增量， 值为正数、零或者负数。

见最后面示例

counter-reset

counter-reset 属性创建或重置一个或多个计数器。
counter-reset 属性通常是和 counter-increment 属性，content 属性一起使用。

值	描述
none	默认。不能对选择器的计数器进行重置
id number	id 定义重置计数器的选择器、id 或 class。 number 可设置此选择器出现次数的计数器的值。可以是正数、零或负数。

见最后面示例

quotes

quotes 属性设置嵌套引用的引号类型。

值	描述
none	规定 “content” 属性的 “open-quote” 和 “close-quote” 的值不会产生任何引号。
string	定义符号。多个值，前两个值规定第一级引用嵌套，后两个值规定下一级引号嵌套。

<style>
  .b{ quotes: "@" "@"; }
  .c{ quotes: "@" "#"; }
</style>

<q class="a">AAAAA</q> |
<q class="b">BBBBB</q> |
<q class="c">CCCCC</q>

上例显示及结果：

<style>
  q:lang(en){
    quotes: "{" "}" "[" "]";
  }
</style>

<p><q>AAAAA<q>aaaaa</q>AAAAA</q></p>

<div lang="en">
  <p><q>AAAAA<q>aaaaa</q>AAAAA</q></p>
</div>

显示结果：

CSS计数器示例1

<style>
  body {  
    /* body 标签出现一次就创建一个计数器 num_a*/
    counter-reset:num_a;
  }
  h1 {
    /* h1 每出现一次创建一个计数器 num_b，重名则重置计数器 */
    counter-reset:num_b;
  }
  h1:before{
    counter-increment:num_a;   /*递增，等效 counter-increment:num_a 1; */
    content:counter(num_a) ". ";
    font-size:20px;
    color: red;
  }
  h2:before {
    counter-increment:num_b; /*递增，等效 counter-increment:num_b 1; */
    content:counter(num_a) "." counter(num_b) " ";
    font-size:16px;
    color: green;
  }
  .h2:before {
    counter-increment:num_b 2; /*每次增加2*/
  }
</style>

<h1>AAA</h1>
<h2>AAA-111</h2>
<h2>AAA-222</h2>
<h2>AAA-333</h2>

<h1>BBB</h1>
<h2>BBB-111</h2>
<h2>BBB-222</h2>

<h1>CCC</h1>
<h2 class="h2">CCC-111</h2>
<h2 class="h2">CCC-222</h2>

显示结果：

CSS计数器示例2

<style>
ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}
</style>
<ol>
  <li>item</li>
  <li>item   
  <ol>
    <li>item</li>
    <li>item</li>
    <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
    </li>
    <li>item</li>
  </ol>
  </li>
  <li>item</li>
  <li>item</li>
</ol>

显示结果：