自由缩放属性resize
为了增强用户体验，CSS3增加了很多新的属性，其中resize就是一个重要的属性，它允许用户通过拖动的方式来修改元素的尺寸来改变元素的大小。到目前为止，可以使用overflow属性的任何容器元素。
在此之前，Web设计师为了要实现这样具有拖动效果的UI，使用大量的脚本代码才能实现，这样费时费力，效率极低。
resize属性主要是用来改变元素尺寸大小的，其主要目的是增强用户体验。但使用方法却是极其的简单，先从其语法入手。
resize: none | both | horizontal | vertical | inherit
取值说明:
none用户不能拖动元素修改尺寸大小。
both用户可以拖动元素，同时修改元素的宽度和高度
horizontal用户可以拖动元素，仅可以修改元素的宽度，但不能修改元素的高度。
vertical用户可以拖动元素，仅可以修改元素的高度，但不能修改元素的宽度。
inherit继承父元素的resize属性值。
例如：通过resize属性，让文本域可以沿水平方向拖大。代码为：
textarea {
-webkit-resize: horizontal;
-moz-resize: horizontal;
-o-resize: horizontal;
-ms-resize: horizontal;
resize: horizontal;
}
CSS3外轮廓属性
外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和元素边框border完全不同，外轮廓线不占用网页布局空间，不一定是矩形，外轮廓是属于一种动态样式，只有元素获取到焦点或者被激活时呈现。
outline属性早在CSS2中就出现了，主要是用来在元素周围绘制一条轮廓线，可以起到突出元素的作用。但是并未得到各主流浏览器的广泛支持，在CSS3中对outline作了一定的扩展，在以前的基础上增加新特性。outline属性的基本语法如下：
从语法中可以看出outline和border边框属性的使用方法极其类似。outline-color相当于border-color、outline-style相当于border-style，而outline-width相当于border-width，只不过CSS3给outline属性增加了一个outline-offset属性，其取值说明如下。
属性值 属性值说明
outline-color 定义轮廓线的颜色，属性值为CSS中定义的颜色值。在实际应用中，可以将此参数省略，省略时此参数的默认值为黑色.
outline-style 定义轮廓线的样式，属性为CSS中定义线的样式。在实际应用中，可以将此参数省略，省略时此参数的默认值为none，省略后不对该轮廓线进行任何绘制。
outline-width 定义轮廓线的宽度，属性值可以为一个宽度值。在实际应用中，可以将此参数省略，省略时此参数的默认值为medium，表示绘制中等宽度的轮廓线。
outline-offset 定义轮廓边框的偏移位置的数值，此值可以取负数值。当此参数的值为正数值，表示轮廓边框向外偏离多少个像素；当此参数的值为负数值，表示轮廓边框向内偏移多少个像素。
inherit 元素继承父元素的outline效果.
任务
image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习css样式</title>
</head>
<style>
.wrapper{
display: flex;
flex-direction: row;
/*如果是水平方向*/
/*align-items:flex-end;*/
/*垂直方向*/
justify-content: flex-start;
}
.wrapper .box{
width: 100px;
height: 100px;
border: 1px solid red;
margin: 10px 10px;
background-color: #4db3ff;
}
</style>
<body>
<div class="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
网友评论