CSS3中的resize属性用于控制元素是否可通过鼠标调整尺寸。设为none时不可调整,设为both则可同时改变宽高。以下通过实例演示该属性的具体应用方法,逐步展示如何在实际页面中实现元素的可调节效果,便于理解其使用方式和效果表现。
1、 双击启动HBuilder编辑器,创建名为resize.html的静态页面,具体操作所示。
2、 在页面主体内添加一个div标签,并写入若干文字内容,具体效果如示例图片所示。
3、 第三步,通过div的ID选择器设置样式,将宽度设为400px,高度为60px,启用双向缩放功能,并设置溢出内容可滚动,具体效果所示。
4、 第四步,保存并预览静态页面,可查看实际显示效果,所示。
5、 调整div标签内文字的字体样式,并设置背景,具体效果所示。
6、 第六步,将文字样式设为渐变效果,颜色选用黄色与蓝色,具体所示。
