您的位置:首页 > Web前端 > > 正文

css3背景制作(纯CSS3实现Material Design效果)

更多 时间:2022-01-21 00:10:30 类别:Web前端 浏览量:1049

css3背景制作

纯CSS3实现Material Design效果

预览

css3背景制作(纯CSS3实现Material Design效果)

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

按钮 Button

初始按钮

  •     <button>button</button>
        <button class="red">red</button>
        <button class="orange">orange</button>
        <button class="blue">blue</button>
        <button class="green">green</button>
        <button class="link">link</button>
    
  • 描边按钮

  •     <button class="b-red bk-n">button</button>
        <button class="b-red">red</button>
        <button class="b-orange">orange</button>
        <button class="b-blue">blue</button>
        <button class="b-green">green</button>
    
  • 禁用按钮   

  • <button disabled>disabled</button>
    
  • 上浮按钮

  •     <button class="circle">+</button>
        <button class="circle teal">+</button>
    
  • 按钮组

  •     <nav class="btn-group">
            <button>button</button>
            <button>button</button>
            <button>button</button>
        </nav>
    
  • 表单Form

    文本输入

  • <input type="text">
    <input type="password" >
    
  • 开关

  • <input type="checkbox" id="switch1" class="switch"><label for="switch1"></label>
    
  • 单选

  • <input type="radio" id="test_radio1" name="ra"><label for="test_radio1">radio1</label>
    <input type="radio" disabled id="test_radio3" name="ra"><label for="test_radio3">radio3</label>
    <input type="radio" checked disabled id="test_radio4" name="ras"><label for="test_radio4">radio4</label>
    
  • 多选

  • <input id="test_checkbox1" type="checkbox"><label for="test_checkbox1">check1</label>
    <input id="test_checkbox3" disabled type="checkbox"><label for="test_checkbox3">check3</label>
    <input id="test_checkbox4" checked disabled type="checkbox"><label for="test_checkbox4">check4</label>
    
    
  • 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    标签:Design Material CSS3