随笔分类 -  CSS

摘要:css实现精致的角标 参考:视觉还原小技巧!CSS 实现角标效果 纯色角标 -> 有白色到透明渐变的角标 -> 更精致有微弱高光的角标 .ribbon1 { margin: 0 60px; font-size: 34px; line-height: 70px; color: #fff; text-a 阅读全文
posted @ 2022-08-05 12:17 shine_lovely 阅读(1747) 评论(0) 推荐(0) 编辑
摘要:css渐变 linear-gradient、repeating-linear-gradient 参考:详解 linear-gradient 和 radial-gradient 的使用 定义 CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。 linear- 阅读全文
posted @ 2022-08-04 17:58 shine_lovely 阅读(506) 评论(0) 推荐(0) 编辑
摘要:CSS filter滤镜属性、clip-path裁减属性 filter contrast(amount) 调整输入的对比度 amount<number>或amount <percentage> 小于100%会降低对比度,大于100%增加对比度。值0%将创建一个完全灰色的图像,而值将100%保持输入不 阅读全文
posted @ 2022-08-03 11:43 shine_lovely 阅读(106) 评论(0) 推荐(0) 编辑
摘要:使用 text-overflow: ellipsis .text { overflow: hidden; /* 将超出的部分隐藏掉 */ text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box 阅读全文
posted @ 2022-06-16 19:08 shine_lovely 阅读(658) 评论(0) 推荐(0) 编辑
摘要:实现思路 1.设置input 属性hidden对该input进行隐藏,或者通过display:none也可以 <input type="radio" name="type" id="adviceRadio1" value="1" checked hidden/> 2.借助label for标签通过i 阅读全文
posted @ 2020-12-03 10:41 shine_lovely 阅读(219) 评论(0) 推荐(0) 编辑
摘要:Flex 布局示例 容器的属性 1、flex-direction属性 flex-direction属性决定主轴的方向(即项目的排列方向)。 .box { flex-direction: row | row-reverse | column | column-reverse; } 2、flex-wra 阅读全文
posted @ 2020-11-04 14:50 shine_lovely 阅读(60) 评论(0) 推荐(0) 编辑
摘要:box-shadow: h-shadow v-shadow blur spread color inset; 值描述 h-shadow 必需。水平阴影的位置。允许负值。 v-shadow 必需。垂直阴影的位置。允许负值。 blur 可选。模糊距离。 spread 可选。阴影的尺寸。 color 可选 阅读全文
posted @ 2020-11-03 10:58 shine_lovely 阅读(65) 评论(0) 推荐(0) 编辑
摘要:background: background-color background-image background-repeat background-position / background-size div { background: #00FF00 url(bgimage.gif) no-re 阅读全文
posted @ 2020-11-03 10:56 shine_lovely 阅读(85) 评论(0) 推荐(0) 编辑
摘要:rgba(0,0,0,0.2) #00000033 十六进制颜色透明度alpha值对照表 100% — FF99% — FC98% — FA97% — F796% — F595% — F294% — F093% — ED92% — EB91% — E890% — E689% — E388% — E0 阅读全文
posted @ 2020-11-03 10:50 shine_lovely 阅读(2424) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示