如何使用CSS3中属性控制其它元素设置成按钮效果

在我们使用CSS3中的新属性时,可以使用不同的属性控制页面元素,生成不同效果图。其中,有个属性appearance,对应的值有button、icon等。下面利用实例说明,操作如下:

工具/原料

  • CSS3
  • HTML5
  • HBuilder
  • 浏览器
  • 截图工具

方法/步骤

  1. 第一步,双击打开HBuilder编辑工具,新建一个静态页面HTML5模板,修改title标签内容,如下图所示:

  2. 第二步,在<body></body>标签内,插入一个div标签元素并设置ID属性,如下图所示:

  3. 第三步,利用CSS3中的ID选择器,控制元素的样式属性,设置宽度、高度、appearance属性等,如下图所示:

  4. 第四步,保存代码并直接使用浏览器预览效果,可以发现查询按钮效果,如下图所示:

  5. 第五步,再在ID选择器中,添加border-radius属性,设置为20px,如下图所示:

  6. 第六步,再添加一个属性background,使用渐变属性,然后查看效果,如下图所示:

注意事项

  • 注意如何使用CSS3中的属性appearance的用法
  • 注意利用元素设置不同的页面效果
分类:游戏/数码
标签:

站长推荐

我们猜您还喜欢

  • 如何使用CSS3中属性控制元素的显示并调整顺序
  • 如何使用CSS3中属性控制元素四个方向的边框样式
  • 如何使用CSS3中属性控制元素的背景色的几种形式
  • 如何使用CSS3中属性和jquery方法控制元素移动
  • css3代码属性Flexbox实现内部div上下居中效果
  • 如何将word文档中的某一页设置成横向
  • qq中的公众号怎么设置成不接收消息和取消关注
  • ppt2010中如何将幻灯片大小设置成横幅
  • word2010中如何将文档设置成行线式稿纸
  • ps中如何处理将图片背景设置成透明的