当前位置: 首页 » 案例分享 » css3自定义复选框
 |  全屏浏览  |  字号调整:

css3自定义复选框

2015-06-24 13:50:12 案例分享 4 637 百度已收录
本文最后更新于2015-06-24,已超过 1年没有更新,如果文章内容、图片或者下载资源失效,请留言反馈,我会及时处理,谢谢!
历史上的今天:10月20日 - 1962年,中印边境自卫反击战爆发

周六下午好, 本文除去代码部分,共559个字,预计阅读时间需要2分钟。

切图时经常会遇到自定义得复选框,所以今天我正好写了一个作为练习,下面我把代码贴出来仅供参考:

在线演示请点击下面滴Result按钮查看:

对了,其中需要理解一个css3新知识:

align-items (适用于父类容器上) :设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式。

使用语法:align-items: flex-start | flex-end | center | baseline | stretch

flex-start:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。

flex-end:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。

center:弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。

baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与’flex-start’等效。其它情况下,该值将参与基线对齐。

stretch:如果指定侧轴大小的属性值为’auto’,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照’min/max-width/height’属性的限制。

具体语法请查看该链接:http://caibaojian.com/demo/flexbox/align-items.html

本文标题:css3自定义复选框

本文地址:http://www.hehaibao.com/css3-custom-checkbox/

版权声明:本博客所有文章除特别声明外,均采用 署名-非商业性使用-禁止演绎 4.0 国际 许可协议。请尊重他人的劳动成果!


发表评论

电子邮件地址不会被公开。 必填项已用*标注