本篇文章主要介绍了使用css3实现material design效果的方法。是对原生组件基于标签属性做了美化，具有一定的参考价值，有兴趣的可以了解一下。

预览

这是一个正在完善的css文件，是对原生组件基于标签属性做了美化，对datepicker,select等无法用css实现的暂不考虑在本文内。

按钮 Button

初始按钮

    <button>button</button>
    <button>red</button>
    <button>orange</button>
    <button>blue</button>
    <button>green</button>
    <button>link</button>

描边按钮

    <button>button</button>
    <button>red</button>
    <button>orange</button>
    <button>blue</button>
    <button>green</button>

禁用按钮   

<button>disabled</button>

上浮按钮

    <button>+</button>
    <button>+</button>

按钮组

    <nav>
        <button>button</button>
        <button>button</button>
        <button>button</button>
    </nav>

表单Form

文本输入

<input><input>

开关

<input><label></label>

单选

<input><label>radio1</label>
<input><label>radio3</label>
<input><label>radio4</label>

多选

<input><label>check1</label>
<input><label>check3</label>
<input><label>check4</label>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！