web端常用的按钮、表单，input，单选框，复选框，开关，表格样式

最新推荐文章于 2021-06-07 11:42:20 发布

zora sweet

最新推荐文章于 2021-06-07 11:42:20 发布

阅读量1.4k

点赞数

分类专栏：前端文章标签： web框架表格按钮单选框复选选框

本文链接：https://blog.csdn.net/qq_43251202/article/details/87882578

版权

本文总结了web端开发中常用的按钮、表单元素（input）、单选框、复选框及开关的样式设计，并探讨了两种表格展示方式，包括自动适应内容和文字截断处理。提供了实际作品的参考图片，旨在促进交流学习。

摘要由CSDN通过智能技术生成

前一段时间在做web端的东西；感觉框架不是很好用；就自己总结了一下；仅供大家交流学习；大家有什么问题一定要告诉我呦~我好进行改正！

按钮部分

x-radius 2圆角，x-bottom 向下10margin ，x-radius-circle圆边

 <!-- 正常按钮 -->
<button class="x-btn x-radius x-bottom">原色按钮</button>
<button class="x-btn primary x-radius x-bottom">默认按钮</button>
<button class="x-btn danger x-radius x-bottom">警告按钮</button>
 <!-- 带动画的按钮 -->
<button class="btn draw-outline">曲婉婷</button>
<button class="btn draw-outline ">李健</button>
<button class="btn draw-outline ">邓紫棋</button>
 <!-- 圆边按钮 -->
<button class="x-btn x-radius-circle x-bottom">原色按钮</button>
<button class="x-btn primary x-radius-circle x-bottom">默认按钮</button>
<button class="x-btn danger x-radius-circle x-bottom">警告按钮</button>

/* 按钮样式 */
.x-btn{
   
   display: inline-block;
   outline:0;
   cursor: pointer;
   background: #e6e6e6;
   font-size: 14px;
   padding: 5px 10px;
   white-space:nowrap;
   border:1px solid transparent;
   -webkit-appearance:none;
   user-select:none;
   transition:background-color .3s ease-out,border-color .3s ease-out;
   -webkit-transition:background-color .3s ease-out,border-color .3s ease-out;
   -moz-transition:background-color .3s ease-out,border-color .3s ease-out;
   -ms-transition:background-color .3s ease-out,border-color .3s ease-out;
   -o-transition:background-color .3s ease-out,border-color .3s ease-out;
   color:#323232;
   text-align: center;
}
.x-btn:hover{
   
    opacity: 0.8;
}
.x-radius{
   
    border-radius: 2px;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   -ms-border-radius: 2px;
   -o-border-radius: 2px;
}
.x-bottom{
   
    margin-bottom: 10px;
}
.primary{
   
    background: #117ff0 !important;
    color: #fff;
    border-color: #117ff0;
}
.danger{
   
    background: #FF5722 !important;
    color: #fff;
    border-color: #FF5722;
}
.x-radius-circle{
   
   border-radius: 50px;
   -webkit-border-radius: 50px;
   -moz-border-radius: 50px;
   -ms-border-radius: 50px;
   -o-border-radius: 50px;
}
/* 带动画的按钮 */
.draw-outline {
   
	box-shadow:inset 0 0 0 2px #000;
	color:#000;
	-webkit-transition:color 0.25s 0.125s;
	transition:color 0.25s 0.125s;
    position:relative;
    margin-bottom: 10px;
}
.draw-outline::before,.draw-outline::after {
   
	border:0 solid transparent;
	box-sizing:border-box;
	content:'';
	pointer-events:none;
	position:absolute;
	width:0;
	height:0;
}
.draw-outline::before {
   
	top:0;
	right:0;
}
.draw-outline::after {
   
	left:0;
	bottom:0;
}
.draw-outline::after {
   
	border-top-width:2px;
	border-left-width:2px;
}
.draw-outline::before {
   
	border-bottom-width:2px;
	border-right-width:2px;
}
.draw-outline:hover {
   
	color:#00a0e9;
}
.draw-outline:hover::before,.draw-outline:hover::after {
   
	border-color:#00a0e9;
	-webkit-transition:border-color 0s,height 0.25s,width 0.25s;
	transition:border-color 0s,height 0.25s,width 0.25s;
	-moz-transition:border-color 0s,height 0.25s,width 0.25s;
	-ms-transition:border-color 0s,height 0.25s,width 0.25s;
    -o-transition:border-color 0s,height 0.25s,width 0.25s;
    width:100%;
	height:100%;
}
.draw-outline:hover::before {
   
	-webkit-transition-delay:0s,0s,0.25s;
	transition-delay:0s,0s,0.25s;
}
.draw-outline:hover::after {
   
	-webkit-transition-delay:0.5s,0.5s,0.75s;
	transition-delay:0.5s,0.5s,0.75s;
}
.btn {
   
	background:none;
	border:none;
	cursor:pointer;
	line-height:1.5;
	font-size: 14px;
	padding:5px 10px;
    letter-spacing:0.05rem;
}
.btn:focus {
   
	outline:2px dotted #55d7dc;
}

在这里插入图片描述

表单部分

<!-- input点击带阴影-->
<div>
    <span>样&nbsp;&nbsp;&nbsp;式：</span>
    <input type="text" class="x-radius x-input" placeholder="请输入">
    <input type="text" class="x-radius x-input" placeholder="请输入">
    <span>文字啊啊</span>
<div>
<!-- input点击不带阴影 -->
<div>
    <span>样&nbsp;&nbsp;&nbsp;式：</span>
    <input type="text" class="x-radius x-input1" placeholder="请输入">
    <input type="text" class="x-radius x-input1" placeholder="请输入">
    <span>文字啊啊</span>
<div>
<!-- textarea文本框-->
<div>
    <span style="float:left;">文本域：</span>
    <textarea name="" id="" cols="30" rows="10" placeholder="请输入" class="x-textarea"></textarea>
</div>
<div class="x-oneday">
     <input id="item1" type="radio" name="item" value="熊大" checked class="x-radio">
     <label for="item1" class="x-lable"></label>
     <span class="x-input-right">选项一</span>