随笔分类 -  CSS

【css效果】实现简单的下拉菜单
摘要：效果图： 下拉菜单距离顶部有一定的距离，为了避免鼠标滑到二级菜单的过程中，二级菜单意外收起。可以在二级菜单的外部在包裹一层div，然后二级菜单距离外部包裹的div有一定的距离即可。 .right { display: flex; align-items: center; i { margin: 0 阅读全文
posted @ 2021-01-23 11:37 cdgogo 阅读(352) 评论(0) 推荐(0)
CSS绘制各种各样的形状图形
摘要：我们在编写前端代码时，经常会遇到各种各样的形状图形（如：边框对话框，三角形，平行四边形、圆角边框、圆形、四叶草、花瓣等），除了用背景图片（css雪碧图或css精灵图+定位引用）和插入img图片的方法，我们还可以用css边框、圆角（border-radius）、渐变和定位的方法结合使用，绘制各种各样的 阅读全文
posted @ 2021-01-16 11:01 cdgogo 阅读(6316) 评论(1) 推荐(5)
【css知识】clip:rect()矩形裁剪功能
摘要：clip 属性剪裁绝对定位元素。 也就是说，只有 position:absolute 的时候才是生效的。 左右宽度相减的值是宽度，上下相减的值是高度。 top right bottom left分别指最终剪裁可见区域的上边，右边，下边与左边。而所有的数值都表示位置，且是相对于原始元素的左上角而言的。 阅读全文
posted @ 2021-01-13 14:07 cdgogo 阅读(540) 评论(0) 推荐(0)
CSS3选择器 :nth-child()的用法
摘要：:nth-child() :nth-child() 选择器，该选择器选取父元素的第 N 个子元素，与类型无关。 一、选择列表中的偶数标签:nth-child(2n) 二、选择列表中的奇数标签 :nth-child(2n-1) 三、选择从第6个开始的，直到最后:nth-child(n+6) 四、选择第 阅读全文
posted @ 2021-01-09 17:15 cdgogo 阅读(1484) 评论(0) 推荐(0)
radio单选框在项目中应用
摘要：<div class="tags-select"> <label class="tag-select"> <input type="radio" name="version" value="1"> <span class="name">全网通（2GB 16GB）</span> </label> <l 阅读全文
posted @ 2020-08-25 09:36 cdgogo 阅读(166) 评论(0) 推荐(0)
综合运用：如何修改美化radio、checkbox的默认样式
摘要：原理：大致原理都是使用原生的checkbox或input标签，在其后面设置相关联的label元素。给元素设置为透明，然后通过定位让用户看到的是元素，利用css的原生属性来判断用户的操作，设置选中后的label样式,即 input[type=checkbox]:checked+label{} 一、利用 阅读全文
posted @ 2020-08-25 09:26 cdgogo 阅读(613) 评论(0) 推荐(0)
@media媒体查询判断iPhone各版本
摘要：/*iPhone5和iPhone SE*/ @media only screen and (device-width : 320px) and (device-height : 568px) and (-webkit-device-pixel-ratio : 2) { /*code*/ } /* i 阅读全文
posted @ 2020-03-05 15:28 cdgogo 阅读(1492) 评论(0) 推荐(0)
单行、多行文本超出显示省略号
摘要：html单行、多行文本超出显示省略号，兼容各个浏览器 阅读全文
posted @ 2019-08-26 10:52 cdgogo 阅读(837) 评论(0) 推荐(0)
CSS3制作文字背景图
摘要：文字带上渐变色，或者说让文字透出图片。这些效果 CSS 属性也可以完成。 方法一、利用CSS3属性mix-blend-mode:lighten;实现 使用 mix-blend-mode 能够轻易实现，我们只需要构造出黑色文字，白色底色的文字 div ，叠加上图片，再运用 mix-blend-mode 阅读全文
posted @ 2019-08-25 18:32 cdgogo 阅读(3205) 评论(0) 推荐(0)
CSS3的滤镜filter属性
摘要：css3的滤镜filter属性，可以对网页中的图片进行类似Photoshop图片处理的效果，例如背景的毛玻璃效果、老照片（黑白照片）、火焰效果等。 阅读全文
posted @ 2019-08-24 11:23 cdgogo 阅读(814) 评论(0) 推荐(0)