![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 51
木子木木的专栏
努力学习 天天向上。。。
展开
-
CSS实现圆形和孤形效果
一,圆形: .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; ...原创 2020-07-24 14:44:11 · 288 阅读 · 0 评论 -
css display:box 属性之一box-orient:horizontal/vertical
在元素上设置该属性,可使其子代排列在同一水平上,类似display:inline-block;一:box-flex:number1,占父级元素宽度的number份2,若子元素设置固定宽度,则该子元素应用固定宽度,其他未设置固定宽度的字元素将余下的父级宽度(父级-已设置固定宽度的子代元素的总宽度按 number占份数3,若子元素有margin值,则按余下(父级宽度-子代固定总宽度-总marg...原创 2019-04-25 18:28:47 · 3521 阅读 · 0 评论 -
display中的box-flex属性
box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。最经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz)、opera(-0)、chrome/safari(-webkit)。即:-web...原创 2019-04-25 18:17:28 · 568 阅读 · 0 评论 -
display:flex和display:box浏览器兼容写法
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; /* ...原创 2019-04-25 17:52:25 · 2829 阅读 · 0 评论 -
css3实现流星划过动画效果
html结构: <div class="d-shootingStar"> <div class="d-stars"></div> <div class="d-stars"></div> <div class="d-stars">&...原创 2019-04-18 21:15:18 · 3582 阅读 · 0 评论 -
css控制隔行样式(CSS伪类选择器 奇偶匹配nth-child(even))
: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...原创 2019-01-22 16:32:12 · 4619 阅读 · 1 评论 -
CSS3自定义滚动条样式 -webkit-scrollbar
滚动条的css样式主要有三部分组成:1、::-webkit-scrollbar 定义了滚动条整体的样式; 2、::-webkit-scrollbar-thumb 滑块部分;3、::-webkit-scrollbar-thumb 轨道部分;.test-1::-webkit-scrollbar {/*滚动条整体样式*/ width: 10px; /*高宽分别...原创 2019-01-03 20:10:00 · 259 阅读 · 0 评论 -
css input placeholder属性 样式修改 包括颜色 大小 位置
&lt;input type="text" placeholder="请输入手机号"&gt;CSS /* placeholder颜色 */ color: #aab2bd; /* placeholder字体大小 */ font-size: 12px; /* placeholder位置 */ text-align: right;原创 2018-12-15 17:07:16 · 9447 阅读 · 1 评论 -
less封装三角形
//向上三角.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...原创 2018-10-22 12:09:07 · 532 阅读 · 0 评论 -
less封装 keyframes animation transformOrigin
// 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...原创 2018-10-22 12:06:19 · 1308 阅读 · 0 评论 -
Vh和Vw的简介和使用
Vw:视区宽度百分值Vh:视区高度百分值Vmin:取Vw或Vh中较小的那一个Vmax:取Vw或Vh中较大的那一个1.视区:是指浏览器内部的可视区域大小,即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小2.场景之元素的尺寸限制我们应该都做过或见过这样的交互:点击下图,弹框查看原始大图;或者一屏内(...转载 2018-09-15 15:14:12 · 9286 阅读 · 2 评论 -
CSS3实现三种切角效果
效果一:代码:<div class="cornerCut">corner cutcorner cutcorner cutcorner cut</div> CSS:.cornerCut{width:200px;margin: 10px 20px;height: 200px;background:#58a;color:#fff;text-...原创 2018-09-10 19:10:44 · 13465 阅读 · 1 评论 -
CSS3实现菱形的两种方法
第一种:(这种方法需要额外的html标签。代码不够简洁,直观,如果图片是非正方形,会出bug)<div class="prismaticPic"><img src="xunLeiFenShares.png" alt=""></div>css:.prismaticPic{width:100px;margin: 20px 30px;trans..原创 2018-09-09 17:03:44 · 11517 阅读 · 0 评论 -
css 实现三种不同的图像边框
1,一幅图案或者图像应用为边框(而不是背景)效果图如下:css代码:.something{padding:1em;border:1em solid transparent;background:linear-gradient(white,white),url(xunLeiFenShares.png);background-size:cover;background-...原创 2018-08-25 16:03:36 · 2135 阅读 · 0 评论 -
css linear-grandient实现棋盘图案 简版
效果图: 代码:.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...原创 2018-08-20 20:13:10 · 1216 阅读 · 0 评论 -
css linear-grandient实现 垂直 水平 斜向条纹 渐变
一,垂直条纹..linearGradient{width:200px;height: 200px;background:linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%,yellowgreen 0);background-size:100% 50px;} 二,水平条纹:.linearVertical{margin-...原创 2018-08-18 14:08:59 · 918 阅读 · 0 评论 -
CSS box-shadow 实现多重边框 效果
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 ...原创 2018-08-12 20:46:45 · 2170 阅读 · 0 评论