随笔分类 -  css

css 径向渐变实现渐变小圈
摘要：效果如下图： 代码如下： .b-list .ceil .line { height: 20px; width: 100%; margin: 0 auto; background: radial-gradient(rgba(235,116,63,0.9), rgba(235,116,63,0.3), 阅读全文
posted @ 2022-11-09 10:52 烂笔头~ 阅读(185) 评论(0) 推荐(0) 编辑
css 背景渐变
摘要：1.渐变从左到右 background: linear-gradient(to right,#000,#fff); 2.渐变从上到下 background: linear-gradient(tobottom,#000,#fff); 3.角度渐变（60°） background: linear-gra 阅读全文
posted @ 2022-10-24 14:02 烂笔头~ 阅读(2636) 评论(0) 推荐(0) 编辑
css 伪类实现渐变线条
摘要：如下图所示： 需要实现渐变的小竖线或者小横线 可以用伪类， 代码如下： div { position: relative; z-index: 2; &::after{ content: ''; position: absolute; z-index: 4; right: 0; top: 10%; b 阅读全文
posted @ 2022-08-17 11:05 烂笔头~ 阅读(521) 评论(0) 推荐(0) 编辑
css 图片灰度处理 grayscale
摘要：img{ -webkit-filter: grayscale(100%); filter: grayscale(100%); } filter 滤镜属性 grayscale,百分比 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则 阅读全文
posted @ 2020-08-07 14:23 烂笔头~ 阅读(1184) 评论(0) 推荐(0) 编辑
box-shadow内阴影的使用
摘要：实现如图文本框边上的内阴影，不需要切背景图 css如下 .i-box-m { background-color: #eb5450; border-radius: 0.4rem; box-shadow: inset -5px 5px 5px #cc4845, inset -5px -5px 5px # 阅读全文
posted @ 2020-07-27 16:23 烂笔头~ 阅读(2887) 评论(0) 推荐(0) 编辑
弹出层居中定位的实现
摘要：HTML部分 <div class="shadow" v-show="showShadow"> <div class="shadow-main"> <h3>温馨提示</h3> <p>您来晚啦！本商品太过抢手！明天早点来哦~</p> <button class="choise-shadow" @cli 阅读全文
posted @ 2020-07-27 16:08 烂笔头~ 阅读(237) 评论(0) 推荐(0) 编辑
移动端初始化样式文档
该文被密码保护。
posted @ 2020-07-27 11:13 烂笔头~ 阅读(0) 评论(0) 推荐(0) 编辑
关于css3动画
摘要：css3动画 阅读全文
posted @ 2017-05-25 11:01 烂笔头~ 阅读(96) 评论(0) 推荐(0) 编辑

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