课程名称：十天精通CSS3

课程章节： 用户界面与其它重要属性

主讲老师：大漠

课程内容：

今天学习的内容包括：属性resize的使用？CSS3外轮廓属性的理解？CSS生成内容是什么？

课程收获：

resize允许用户通过拖动的方式来修改元素的尺寸来改变元素的大小。主要目的是增强用户体验。resize的属性值有none 、both 、horizontal、vertical、inherit。其中none表示用户不能拖动元素修改尺寸大小。both表示用户可以拖动元素，同时修改元素的宽度和高度。horizontal表示用户可以拖动元素，仅可以修改元素的宽度，但不能修改元素的高度。vertical表示用户可以拖动元素，仅可以修改元素的高度，但不能修改元素的宽度。inherit表示继承父元素的resize属性值。

外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和元素边框border完全不同，外轮廓线不占用网页布局空间，不一定是矩形，外轮廓是属于一种动态样式，只有元素获取到焦点或者被激活时呈现。outline属性，主要是用来在元素周围绘制一条轮廓线，可以起到突出元素的作用。我们需要注意的是目前只支持主流的浏览器。outline的属性值有很多，其中outline-color用来定义轮廓线的颜色。outline-style用来定义定义轮廓线的样式。outline-width用来定义轮廓线的宽度。outline-offset用来定义轮廓边框的偏移位置的数值，可以为正值和负值。如果为正值表示轮廓边框向外偏离多少个像素，如果为负值表示轮廓边框向内偏移多少个像素。inherit表示元素继承父元素的outline效果。

CSS3中::before和::after通过content属性来实现，我们需要注意的是这个属性对于img和input元素不起作用。content配合CSS的伪类或者伪元素。如果为none表示不生成任何内容。attr插入标签属性值。url使用指定的绝对或相对地址插入一个外部资源。string用来插入字符串。CSS中有一种清除浮动的方法clearfix就使用了content。

今天学习了边框的12-1到12-4的4个小结，花费了42分钟，今天主要学习了resize属性的使用，可以用在textarea上，用来控制多行输入框的是不是可以拖拽。而且我们还可以使用content在我们需要的文字前面插入图标或者文字。如果在使用浮动时，为了防止影响后面的元素，我们就可以使用content来清除浮动，从而让后面的元素不受到影响。outline可以实现一些比较好看的轮廓边框效果，但是平时使用的次数比较少。