CSS
文章平均质量分 82
cdgogo
这个作者很懒,什么都没留下…
展开
-
CSS3的滤镜filter属性
css3的滤镜filter属性,可以对网页中的图片进行类似Photoshop图片处理的效果,例如背景的毛玻璃效果、老照片(黑白照片)、火焰效果等。一、blur(px)高斯模糊给图像设置高斯模糊。值越大越模糊,默认是0,就是不模糊;不过,blur模糊的缺点是边缘也会模糊不清。不过,在实际的应用中,会给图像添加一个box,超出范围隐藏二、brightness(%)亮度这里写brightness(2) 跟 写 brightness(200%) 效果是一样的。三、contrast(%)对比度.原创 2021-11-01 23:30:52 · 246 阅读 · 0 评论 -
CSS总结:让元素居中的方法
一、text-align:center;这个是没有浮动的情况下,我们可以先将要居中的块级元素设为inline/inline-block,然后在其父元素上加上属性text-align:center;即可。如果要居中的块级元素直接是内联元素(span、img、a等),直接在其父级元素上加上属性text-align:center;即可;二、margin:0 auto;前提:居中的元素必须是块级元素,如果是内联元素,需要添加属性display:block;而且元素不浮动。三、绝对定位+偏移(已知宽高,需计.原创 2021-10-30 20:59:16 · 1708 阅读 · 0 评论 -
css常用选择器:相邻兄弟选择器(+)、子选择器(>)、兄弟选择器(~)、属性选择器等用法
前言:我们在码代码的时候,经常会遇到需要给第一个或者最后一个元素添加或删除样式,还有一些比较特殊的是选取第几个元素添加或删除样式,下面记录css选择器中常见的选择器:相邻兄弟选择器(+)、子选择器(>)、兄弟选择器(~)、first-child、:last-child、:nth-child()、:nth-last-child()的用法。相邻兄弟选择器(+)相邻兄弟选择器可选择紧接在另一个元素后的元素,且二者具有相同的父亲元素。注释:与子结合符一样,相邻兄弟结合符旁边可以有空白符。器。<.原创 2021-10-29 19:58:27 · 11586 阅读 · 0 评论 -
综合运用:如何修改美化radio、checkbox的默认样式
现在前端页面效果日益丰富,默认的input组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求,在此特地整理下修改radio、CheckBox样式的方法。原理:大致原理都是使用原生的checkbox或input标签,在其后面设置相关联的label元素。给<input>元素设置为透明,然后通过定位让用户看到的是<label>元素,利用css的原生属性来判断用户的操作,设置选中后的label样式,即input[type=checkbox]:checked+label.原创 2021-10-29 18:42:11 · 1092 阅读 · 0 评论 -
radio单选框在项目中应用
效果图 See the Pen radio,checkbox美化应用实例 by cdgogo (@chendanaliyuntubiao) on CodePen. <div class="container goods-info"> <div class="row goods-tags"> <div class="col-md-2 tag-label">选择版本</div>原创 2021-10-29 18:14:47 · 91 阅读 · 0 评论 -
css 伪类和伪类元素的区别
伪类伪类更多的定义的是状态,如:hover,或者说是一个可以使用CSS进行修饰的特定的特殊元素,如:first-child伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。当用户悬停在指定的元素时,我们可以通过 :hover 来描述这个元素的状态。虽然它和普通的 CSS 类相似,可以为已有的元素添加样式,但是它只有处于 DOM 树无法描述的状态下才能为元素添加样式,所以将其称为伪类。伪元素伪元素用于创建一些不在文档树中的元素,并为其添加样式。我们可以通原创 2021-10-29 17:25:59 · 103 阅读 · 0 评论 -
css选择器:nth-child()的用法
:nth-child():nth-child() 选择器,该选择器选取父元素的第 N 个子元素,与类型无关。偶数标签:nth-child(2n)奇数标签 :nth-child(2n-1)选择从第6个开始的,直到最后:nth-child(n+6)选择第1个到第6个 :nth-child(-n+6)两者结合使用,可以限制选择某一个范围,选择第6个到第9个 :nth-child(n+6):nth-child(-n+9):nth-last-child() 选择器:nth-last-chil原创 2021-10-10 22:54:18 · 4035 阅读 · 0 评论 -
css3属性transform-origin属性讲解
transform是CSS3里的变换属性,常用的有translate(平移)、rotate(旋转)、skew(倾斜)、scale(缩放)方法。而transform-origin并不是transform的属性值,其具有独立的语法,但值得注意的是,transform-origin必须配合transform来使用,这个从名字也可以看得出来,就是给transform设置的各种动作设置一个参考点。默认情况下,元素的动作参考点为元素盒子的中心。transform可以设置九个位置的值,水平方向有left | cente.原创 2021-10-10 22:33:44 · 8945 阅读 · 2 评论 -
修改input、textarea元素中的placeholder属性样式
input::-webkit-input-placeholder{} /* 使用webkit内核的浏览器 */input:-moz-placeholder{} /* Firefox版本4-18 */input::-moz-placeholder{} /* Firefox版本19+ */input:-ms-input-placeholder{} /* IE浏览器 */...原创 2020-07-16 13:39:11 · 1042 阅读 · 0 评论 -
CSS实用技巧干货
一、使用 :not() 在菜单上应用/取消应用边框我们通常的做法是先给每个菜单项设置边框,然后在设置最后一个菜单的边框为零/* add border */.nav li { border-right: 1px solid #666;}//* remove border */.nav li:last-child { border-right: none;}不过不要这么做,使用 :not() 伪类来达到同样的效果:.nav li:not(:last-child) { bord原创 2020-07-16 13:25:48 · 165 阅读 · 0 评论 -
filter(滤镜)属性
css3的滤镜filter属性,可以对网页中的图片进行类似Photoshop图片处理的效果,例如背景的毛玻璃效果、老照片(黑白照片)、火焰效果等。一、blur(px)高斯模糊二、brightness(%)亮度三、contrast(%)对比度四、drop-shadow()阴影注意: 这个 drop-shadow 与 box-shadow 都是在说阴影,但还是有区别的,看下图图中火焰的图片,是一张png图片,除了火焰以外,其他部分是透明的,我们能看见,box-shadow 是给整个.原创 2020-07-16 13:24:04 · 842 阅读 · 0 评论 -
@media媒体查询判断iPhone各版本
/*iPhone5和iPhone SE*/@media only screen and (device-width : 320px) and (device-height : 568px) and (-webkit-device-pixel-ratio : 2) { /*code*/ } /* iPhone6/7/8 */@media only scree...原创 2020-02-29 13:36:08 · 1568 阅读 · 0 评论 -
移动端禁止/取消长按进行复制粘贴的操作
项目中长按删除、长按添加关注等功能是很常见的。但是手机端长按默认是会在周边随便选中文字弹出自带的复制粘贴的操作,所以我们需要禁止掉移动端长按进行复制粘贴的操作。(可以防止内容被复制)*{ -webkit-touch-callout:none; /系统默认菜单被禁用/ -webkit-user-select:none; /webkit浏览器/ -moz-user-select:none;...原创 2020-02-27 14:27:29 · 4597 阅读 · 0 评论 -
怎么让背景图片铺满整个页面
方法一、background背景图片设置html,body { width: 100%; height: 100%; background: url(../images/bg.png) no-repeat; background-size: 100% 100%; background-attachment: fixed;/* 不设置的话页面滑动时,背景会不铺满*/}方法二、图片...原创 2020-01-20 14:40:57 · 13104 阅读 · 1 评论 -
网页中滚动条的设置和修改
一、通过css设置滚动条在所有浏览器,滚动条可定制性最强的当属webkit内核的浏览器了。因为源代码开放的原因,市面上基于webkit内核的浏览器也是很难穷举完。例如有:Google Chrome、Opera(opera最近宣布使用webkit内核了)、360极速浏览器,猎豹浏览器等,搜狗浏览器……下面我们来看一下webkit浏览器是如何强大的吧!首先来了解它的属性:1. ::-w...原创 2018-06-12 00:07:10 · 6465 阅读 · 0 评论 -
CSS绘制各种各样的形体和图形
我们可以用css属性绘制各种各样的形状图形,如实心圆、心形、八卦阵图、三角形、四叶草、无穷符号、对话框、立体球型等,用到的属性有border-radius、position定位,伪元素after和before、border边框、渐变等实心圆.circle { width: 120px; height: 120px; background: #317ef3; ...原创 2018-09-29 16:35:49 · 3278 阅读 · 1 评论 -
让元素水平垂直居居中的方法(总结)
将元素居中是我们在项目开发中经常遇到的,下面就来总结一下元素居中的方法。一、text-align:center;这个是没有浮动的情况下,我们可以先将要居中的块级元素设为inline/inline-block,然后在其父元素上加上属性text-align:center;即可。如果要居中的块级元素直接是内联元素(span、img、a等),直接在其父级元素上加上属性text-align:cen...原创 2019-08-24 10:46:48 · 1135 阅读 · 0 评论 -
详解CSS中的 object-fit 与 object-position
问题:一个div宽度不固定,高度固定,采用Flex布局,它里面有两个元素一个img宽度占40%,高度占100%,一个p元素,宽度占60%,高度占100%,调整浏览器窗口大小,要保证,img元素不变形,宽高比不变,怎么办!从图中可以看出,随着调整浏览器窗口,图片的宽高比也被破坏了,我们该怎么办呢?我想大家应该会想到用 background,用一个div的background来替代img元素,这...原创 2019-09-06 10:40:46 · 472 阅读 · 0 评论