木子木木的专栏

一，圆形： .circle { border-radius: 50%; }二，半圆： .semi-circle { border-radius: 100px 100px 0 0; height: 50px; }四，扇形 .sector { border-radius: 100px 0 0;}五，弧形：.arc{ border-radius: 100px 0; ...

在元素上设置该属性，可使其子代排列在同一水平上，类似display:inline-block;一：box-flex:number1，占父级元素宽度的number份2，若子元素设置固定宽度，则该子元素应用固定宽度，其他未设置固定宽度的字元素将余下的父级宽度（父级-已设置固定宽度的子代元素的总宽度按　number占份数3，若子元素有margin值，则按余下（父级宽度-子代固定总宽度-总marg...

box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。最经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz)、opera(-0)、chrome/safari（-webkit)。即：-web...

display:flex和display:box都可用于弹性布局，在实际的测试中display:flex不能完全的替代display:box。display:flex的存在浏览器兼容性兼容写法：.container{display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */display: -moz-box; /* ...

html结构： <div class="d-shootingStar"> <div class="d-stars"></div> <div class="d-stars"></div> <div class="d-stars">&...

:nth-child(even) 控制偶数样式:nth-child(odd)控制奇数样式:nth-child(2n+1)控制2n+1行样式语法：:nth-child(an+b)下面就把CSS3标准中nth-child()用法大致介绍给大家：CSS3伪类选择器：nth-child()简单的归纳下nth-child()的几种用法。第一种：简单数字序号写法:nth-child(num...

滚动条的css样式主要有三部分组成：1、::-webkit-scrollbar 定义了滚动条整体的样式； 2、::-webkit-scrollbar-thumb 滑块部分；3、::-webkit-scrollbar-thumb 轨道部分；.test-1::-webkit-scrollbar {/*滚动条整体样式*/ width: 10px; /*高宽分别...

&amp;lt;input type=&quot;text&quot; placeholder=&quot;请输入手机号&quot;&amp;gt;CSS /* placeholder颜色 */ color: #aab2bd; /* placeholder字体大小 */ font-size: 12px; /* placeholder位置 */ text-align: right;

//向上三角.triangle(top,@w:0.3125rem,@c:#ccc){border-width:@w;border-color:transparent transparent @c transparent;border-style: dashed dashed solid dashed;}//向下三角.triangle(bottom,@w:0.3125r...

// animation.animation(@n:name,@t:1.5s,@speed:ease,@i:infinite,@a:alternate,@f:forwards){-webkit-animation: @n @t @speed @i @a @f;animation: @n @t @speed @i @a @f;}用法：.animation(scale,1.5...

Vw:视区宽度百分值Vh:视区高度百分值Vmin:取Vw或Vh中较小的那一个Vmax:取Vw或Vh中较大的那一个1.视区:是指浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小2.场景之元素的尺寸限制我们应该都做过或见过这样的交互：点击下图，弹框查看原始大图；或者一屏内（...

效果一：代码：&lt;div class="cornerCut"&gt;corner cutcorner cutcorner cutcorner cut&lt;/div&gt; CSS：.cornerCut{width:200px;margin: 10px 20px;height: 200px;background:#58a;color:#fff;text-...

第一种：(这种方法需要额外的html标签。代码不够简洁，直观，如果图片是非正方形，会出bug)&lt;div class="prismaticPic"&gt;&lt;img src="xunLeiFenShares.png" alt=""&gt;&lt;/div&gt;css：.prismaticPic{width:100px;margin: 20px 30px;trans..

1，一幅图案或者图像应用为边框（而不是背景）效果图如下：css代码：.something{padding:1em;border:1em solid transparent;background:linear-gradient(white,white),url(xunLeiFenShares.png);background-size:cover;background-...

效果图： 代码：.qipanLinear{margin-top:10px;margin-bottom:10px;width:200px;height: 200px;background:#eee;background-image:linear-gradient(45deg,#ccc 25%,transparent 0),linear-gradient(45d...

一，垂直条纹..linearGradient{width:200px;height: 200px;background:linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%,yellowgreen 0);background-size:100% 50px;} 二，水平条纹：.linearVertical{margin-...

1，多层边框.boxShadow{ margin: 2em auto; width:50%; height: 5em; background:yellowgreen; box-shadow:0 0 0 10px #655, 0 0 0 15px #ffe, 0 2px 5px ...