css3笔记03--界面设计

CSS3–界面设计

resize

resize：none|both|horizontal|vertical|inherit；

• none：默认值，表示不能调整元素
• both：表示可以调整元素的宽度和高度
• horizontal：表示用户可以调整元素的宽度，但是不能调整元素的高度
• vertical：表示可以调整元素的高度，按时不能调整元素的宽度
• inherit：继承父元素 注意：resize属性需要和溢出处理overflow或overflow-x或overflow-y一起使用，才能把元素定义成可以调整大小的，且溢出属性值不能为visible。

  div{
  	resize：both；
  	overflow：auto；
  }

appearance

可以方便的把元素伪装成其他类型的元素。但是需要考虑叫兼容性

appearance：normal|icon|window|button|menu|field；

normal：正常的修饰元素
icon：把元素修饰成像一个图标
window：把元素修饰成像一个视窗
button：把元素修饰成像一个按钮
menu：把元素修饰成像一个菜单
field：把元素修饰成像一个输入框

appearance定义的元素，仍然保留元素的功能，只在外观上做了一些改变。由于收到元素本身功能的局限，不是每一个元素都可以任意被修改，但是恰当的修饰大部分是可行的。

-webkit-appearance：button；
-moz-appearance：button；
appearance：button；

content

为元素添加内容
例如：

a[href$=html]:before{
	content:"网页";
}
a[href$=jpg]:before{
	content:"图片";
}

这样的话在连接对应位置的前面会显示相应的文字，比如在网页链接前面显示网页两个字，在图片显示前面显示图片两个字。

outline

该属性用来在元素周围定义轮廓线。

outline-width：定义宽度
outline-style：元素风格（none、dotted、dashed、solid、double、groove、ridge、inset、outset、inherit）
outline-color：颜色设置
outline-offset：偏移距离，轮廓线和边界的距离