随笔分类 - CSS3
摘要:前言:发现chakra-ui也不错,虽然比起antd功能稍少一点。 1,Stack与Flex区别 Notes on Stack vs Flex#The Stack component and the Flex component have their children spaced out even
阅读全文
摘要:vmin 和 vmax 单位 vmin 是相对于视口宽度和高度中较小值进行计算,它的值为视口宽度和高度中的较小值的百分比。 例如,如果视口宽度为 800px,高度为 1000px,那么 1vmin 等于 8px(800px 的 1%)。 vmax 是相对于视口宽度和高度中较大值进行计算,它的值为视口
阅读全文
摘要:前言:flex布局,对于我来说是新事物,因为是这几年新出现的。之前还想用原来的布局,后来一想,新东西肯定能更好的解决问题,学习之后发现还真是。 原来没学,就是因为flex布局属性很多,记忆成本大,但实际上理解后,就没有那么复杂了。 最核心的就是知道flex:1是什么意思。其实是flex-grow的缩
阅读全文
摘要:使用技巧会让人变的越来越懒,没错,我就是想让你变懒。下面是我收集的CSS高级技巧,希望你懒出境界。 1. 黑白图像 这段代码会让你的彩色照片显示为黑白照片,是不是很酷? 2. 使用 :not() 在菜单上应用/取消应用边框 先给每一个菜单项添加边框 ……然后再除去最后一个元素…… ……可以直接使用
阅读全文
摘要:作者:zccst通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。@keyframes 规则用于创建动画。在 @keyframes 中...
阅读全文
摘要:作者:zccst例如:图片墙 。另外还有,便签墙使用的样式:1,正常情况下ul#index_cards li {background: url("../images/card_bg.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);border: 1px solid ...
阅读全文
摘要:作者:zccstCSS3 Gradient 分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。1,在mozilabackground: -moz-linear-gradient( top,#ccc,#000);2,-webkit-linear-gradien...
阅读全文