随笔- 75 文章- 0 评论- 2 阅读- 12万

随笔分类 - css

摘要：.line { width: 100%; background: repeating-linear-gradient( -45deg, rgba(0, 41, 136, 0.4) 0px 24px, #fff 24px 48px, rgba(238, 0, 7, 0.4) 48px 72px, #f 阅读全文

posted @ 2023-08-30 15:45 PromiseOne 阅读(53) 评论(0) 推荐(0) 编辑

csss线条中间粗两边细

摘要：效果 <div class="hr-line-div"></div> .hr-line-div { margin: 0 auto; height: 2px; width: 1000px; background: radial-gradient(red 24%, white 100%); } 阅读全文

posted @ 2021-10-11 11:49 PromiseOne 阅读(449) 评论(0) 推荐(0) 编辑

css 中间文字两边横线

摘要：<div class="content"> <div class="line"></div> <div class="txt">文字内容</div> <div class="line"></div> </div> .content { display: flex; align-items: cent 阅读全文

posted @ 2021-07-29 16:57 PromiseOne 阅读(108) 评论(0) 推荐(0) 编辑

css 绝对定位元素居中显示

摘要：1 .div{ 2 postion:absoult; 3 top: 50%; 4 left: 50%; 5 transform: translate(-50%,-50%); 6 } 阅读全文

posted @ 2021-03-31 10:39 PromiseOne 阅读(60) 评论(0) 推荐(0) 编辑

css3的box方法实现文本水平垂直居中

摘要：<div class="center"> 我是多行文字，我是多行文字，我是多行文字 </div> .center { width: 100px; height: 100px; padding: 10px; border: 1px solid #ccc; margin: 20px auto; word 阅读全文

posted @ 2020-11-20 17:29 PromiseOne 阅读(464) 评论(0) 推荐(0) 编辑

tab css 切换效果

摘要：<div class="tabs-list"> <div class="tabs-content"> <div v-for="(item,index) in test" :key="index" @click="txt(index)" :class="current index?'active':' 阅读全文

posted @ 2020-01-13 17:11 PromiseOne 阅读(173) 评论(0) 推荐(0) 编辑