html的radio单选框样式,radio单选框⾃定义样式等css集合1.radio⾃定义样式
双层圆点效果
复制代码width: 30rpx;
height: 30rpx;
display: inline-block;
padding: 6rpx;
border: 1px solid #2639a0;
border-radius: 50%;
background-color: #2639a0;
background-clip: content-box;
复制代码
2.css制作菜单图标三道杠样式
复制代码display: inline-block;
width: 140px; height: 10px;
padding: 35px 0;
border-top: 10px solid;
border-bottom: 10px solid;
background-color: currentColor;
background-clip: content-box;
复制代码
3.打点loading样式，⽆需gif图⽚，仅css搞定loading样式
正在加载中...
复制代码.dot {
display: inline-block;
height: 1em;
line-height: 1;
text-align: left;
vertical-align: -.25em;
overflow: hidden;
}
.dot::before {
display: block;
content: '...\A..\A.';
white-space: pre-wrap;
animation: dot 3s infinite step-start both;
}
@keyframes dot {
33% { transform: translateY(-2em); }
66% { transform: translateY(-1em); }
}
复制代码
4.flex布局中妙⽤margin: auto
如下图中使⽤的flex布局中，图标前的展⽰数据个数不定，但不会超过4个，如果图标前⼀个数据也不展⽰，图标应该靠右显⽰，最后⼀个图标元素妙⽤margin: auto，即使没有前⾯的数据，只有⼀个图标也可靠右展⽰
margin-left:auto
复制代码
5.不使⽤js，纯css制作⽔平垂直居中的蒙层弹框，浏览器窗⼝⼤⼩改变，弹窗也会⽔平垂直居中
pc端弹窗展⽰：
移动端弹窗展⽰：
内容占位
复制代码.container {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
/* for IE8 */
background: url(data:image/png;==); /* for IE9+ */
background: rgba(0,0,0,.5), none;
text-align: center;
white-space: nowrap;
z-index: 99;
}
.container:after {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.dialog {
display: inline-block; vertical-align: middle; border-radius: 6px; background-color: #fff; text-align: left;
html的flex布局white-space: normal;
}
复制代码

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。