![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 52
css
533_
这个作者很懒,什么都没留下…
展开
-
[css3] 如何设置边框颜色渐变
【代码】[css3] 如何设置边框颜色渐变。原创 2024-07-22 13:45:23 · 42 阅读 · 0 评论 -
[css] 让文字进行竖着 分散对齐
【代码】[css] 让文字进行竖着 分散对齐。原创 2024-01-28 18:13:38 · 372 阅读 · 0 评论 -
[css] 文字加描边 -webkit-text-stroke
【代码】[css] 文字加描边 -webkit-text-stroke。原创 2024-01-11 15:57:05 · 504 阅读 · 0 评论 -
[css] flex wrap 九宫格布局
【代码】[css] flex wrap 九宫格布局。原创 2023-12-15 17:14:25 · 732 阅读 · 0 评论 -
[css] flex 子元素自动撑开父元素宽度
这样,子元素将会垂直排列在一列内,并自动撑开父元素的宽度。同样地,如果子元素的高度总和超过了父元素的高度,则子元素会被压缩,以适应父元素的高度。这样,子元素将会水平排列在一行内,并自动撑开父元素的宽度。如果子元素的宽度总和超过了父元素的宽度,则子元素会被压缩,以适应父元素的宽度。对于水平排列的情况,我们可以设置父元素的。对于垂直排列的情况,我们可以设置父元素的。原创 2023-11-03 14:27:54 · 2960 阅读 · 0 评论 -
[css] 实现字体发光效果 text-shadow
text-shadow: 水平阴影的位置 垂直阴影的位置 阴影模糊的距离 阴影颜色;原创 2023-05-22 13:17:23 · 577 阅读 · 0 评论 -
[css] 文字渐变
【代码】[css] 文字渐变。原创 2023-04-12 18:16:34 · 48 阅读 · 0 评论 -
[vue] 如何使用CSS自定义变量
【代码】[vue] 如何使用CSS自定义变量。原创 2023-03-30 21:27:50 · 172 阅读 · 0 评论 -
[css] 父元素flex:1,子元素设置height:100%无效
父级的高度是通过flex为1来设置的,然后子级想保持和父级一样的高度。由于这里的父元素是缺省的,所以设置了高度百分百是无效的。这个时候inner就会保持和content一样的高度。可以设置父级高度为0.原创 2023-03-17 10:15:26 · 4287 阅读 · 0 评论 -
[css] flex 1失效 el-scrollbar
父级都要有height,width。原创 2023-03-13 16:08:16 · 80 阅读 · 0 评论 -
[css] flex:1失效问题
【代码】[css] flex:1失效问题。原创 2023-03-13 09:29:08 · 671 阅读 · 0 评论 -
[css] 毛玻璃 backdrop-filter: blur
【代码】[css] 毛玻璃 backdrop-filter: blur。原创 2022-12-19 16:45:26 · 109 阅读 · 0 评论 -
[css] 自定义背景图拼接
将背景切片为head、body、foot三个png。原创 2022-12-16 13:31:34 · 580 阅读 · 0 评论 -
[CSS3] 绘制六边形
【代码】[CSS3] 绘制六边形。原创 2022-12-16 13:28:13 · 185 阅读 · 0 评论 -
[css] before和:after实现div下方的小三角
【代码】[css] before和:after实现div下方的小三角。原创 2022-09-21 09:12:00 · 601 阅读 · 0 评论 -
[css] 不同大小的字体底部对齐
不同font-size的字体会出现上下偏差,原创 2022-08-04 09:35:41 · 2970 阅读 · 0 评论 -
[css] 实现文字竖向排列
代码】[css]实现文字竖向排列。原创 2022-07-27 09:42:55 · 686 阅读 · 0 评论 -
[css] box-shadow层级问题-相邻元素背景遮盖了阴影
当box-background元素没有给背景颜色时,box-shadow的阴影可以正常显示当box-background元素给定一个背景色之后,box-shadow的阴影就没有了。原创 2022-07-21 14:58:44 · 730 阅读 · 0 评论 -
[css] flex 间距 gap 折行滚动(九宫格 四宫格 横向滚动)
九宫格 横向滚动参考:felx gap实现两行多列布局,列的数目不定,左右可以滚动。先固定父元素高度,然后用flex纵向排列( flex-direction: column;)。然后子元素高度设置为父元素一半,这样一纵列只能放下两个元素,然后超出换行 (flex-wrap: wrap;),元素就自动向右排列了。参考:flex 实现两行滚动布局实现的思路...原创 2022-07-07 19:21:17 · 3805 阅读 · 0 评论 -
[css] title属性 给元素增加提示
e属性 给元素增加提示原创 2022-06-17 21:28:18 · 309 阅读 · 0 评论 -
[css] width属性的min-content和max-content有什么作用
css原创 2022-06-17 21:26:19 · 345 阅读 · 0 评论 -
[css] before、:after ,当content使用中文时有时候会出现乱码
在进行页面开发时,经常会使用:before, :after伪元素,但是在:before或:after的content属性使用中文的话,会导致某些浏览器上出现乱码解决方案:1、确保HTML、CSS文件使用UTF-8格式,并且HTML文档也使用UFT-8的字符编码格式,即HTML文档的meta信息包含 <meta charset="UTF-8"> 。2、避免在CSS的:before, :after中使用中文,如果一定要使用,可以使用中文对应的Unicode。使用站长工具(http://too原创 2022-05-09 10:00:18 · 1070 阅读 · 0 评论 -
[css] grid
display: grid;// 设置行与行之间的间距为16px,列与列之间的间距为16pxgrid-gap: 16px 16px;// 将容器分为两列,列宽最小为262px 最大为容器宽度grid-template-columns: repeat(auto-fit, minmax(262px, 1fr));// 将容器分为两行,高度都为160pxgrid-template-rows: repeat(2, 160px);bootstrap 设置columns宽度_grid布局笔记2——g原创 2022-05-06 10:27:34 · 86 阅读 · 0 评论 -
[css] 实现瀑布流
multi-column多列布局实现瀑布流先简单的讲下multi-column相关的部分属性column-count设置列数column-gap设置列与列之间的间距column-width设置每列的宽度还要结合在子容器中设置break-inside防止多列布局,分页媒体和多区域上下文中的意外中断break-inside属性值 auto 指定既不强制也不禁止元素内的页/列中断。 avoid 指定避免元素内的分页符。 avoid-page 指定避免元素内的分页符。原创 2022-04-19 19:16:48 · 154 阅读 · 0 评论 -
[css] 改变鼠标选中文字的样式
::selection { background: #26a69a; color: #ffffff;}用css改变鼠标选中文字的样式原创 2022-04-19 19:12:17 · 918 阅读 · 0 评论 -
[css] 取消双击选中文字
div{ -moz-user-select:none;/*火狐*/ -webkit-user-select:none;/*webkit浏览器*/ -ms-user-select:none;/*IE10*/ -khtml-user-select:none;/*早期浏览器*/ user-select:none;}这样这个区域的文字就不会被选中了。css取消双击选中文字...原创 2022-04-02 13:26:05 · 438 阅读 · 0 评论 -
[css-transition] 平移动画
// moveR.moveR-enter-active, .moveR-leave-active { transition: all .5s linear; transform: translateX(0);} .moveR-enter, .moveR-leave { transform: translateX(100%);} .moveR-leave-to{ transform: translateX(100%); }原创 2022-04-02 11:12:49 · 1528 阅读 · 0 评论 -
[css] 如何用css控制border 的长度?
是用的border。推荐伪元素:after你把这个小横线不要当成border,而是把它当成一个背景色充满的很小的div块,这样你可以随意改变这个div的大小 形状 长短,比较方便div:after { content: ''; position: absolute; left: 0; top: 0; bottom: 5px; right: 0; height: 1px; wi.原创 2022-03-28 18:31:31 · 8326 阅读 · 1 评论 -
高度不固定的元素使用vue的transition效果
可以使用 max-height 代替 height。只要我们设置一个肯定比元素自增长大的高度值就可以了。当然,因为是根据 max-height 值进行过渡效果,所以最好不要大得离谱,否则动画效果不理想。<transition name="fade-height"> <div class="filterInner-wraper">我是内容</div> </transition>.filterInner-wraper{ overflow:原创 2022-01-11 17:57:47 · 1385 阅读 · 0 评论 -
[css] 面试题 画一个三角形
.border { width: 0; height: 0; border: 50px solid; border-color: transparent transparent #d9534f;}<div class="border"></div>[css] CSS画一个三角形,CSS绘制空心三角形原创 2021-11-12 20:56:18 · 106 阅读 · 0 评论 -
[css] 面试 简单写 圣杯布局,双飞翼布局代码
圣杯布局原理:[css] 圣杯布局 双飞翼布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圣杯布局</title> <style> html, body{ height: 100%; overflow: hidden; } .container{原创 2021-11-12 14:37:14 · 121 阅读 · 2 评论 -
[css] 圣杯布局 双飞翼布局
三栏式布局三栏布局,两边的盒子宽度固定,中间盒子自适应,“圣杯”和“双飞翼就是三栏式布局,它们实现的效果是一样的,差别在于其实现的思想。圣杯布局圣杯:父盒子包含三个子盒子(左,中,右)中间盒子的宽度设置为 width: 100%; 独占一行;使用负边距(均是 margin-left)把左右两边的盒子都拉上去和中间盒子同一行;.left {margin-left:-100%;} 把左边的盒子拉上去.right {margin-left:-右边盒子宽度px;} 把右边的盒子拉上去父盒子原创 2021-11-12 09:13:00 · 711 阅读 · 0 评论 -
[css] 如何实现div盒子水平垂直居中
html 代码<div class="parent"> <div class="child">DEMO</div></div>公共css样式.parent{ width:200px;height:300px; background:#ddd;} .child{ background:#666; color:#fff;}盒子宽高 + 父相子绝 + margin父相子绝,子盒子:top:50%,left:50%;然后设置左外边原创 2021-11-11 17:56:19 · 1078 阅读 · 0 评论 -
[css] CSS画一个三角形,CSS绘制空心三角形
1.不同理解的边框<div class="border"></div>.border { width: 50px; height: 50px; border: 2px solid; border-color: #96ceb4 #ffeead #d9534f #ffad60;}将border设置大一点.border { width: 50px; height: 50px; border: 50px solid;原创 2021-10-21 11:41:16 · 4652 阅读 · 0 评论 -
[css] 如何使用Font Awesome
官网下载Font Awesome旧版或最新版;http://www.fontawesome.com.cn/faicons/将CSS内的font-awesome文件放到自己的css文件夹中;将Fonts文件夹取出,同放到与CSS文件夹同级目录即可 <link rel="stylesheet" href="../css/font-awesome.css">css代码 @font-face { font-family: 'FontAwesome'; ..原创 2021-10-20 20:14:52 · 3362 阅读 · 0 评论 -
[css] 小案例,i 提示小图标
<i></i>i{ display: inline-block; width: 14px; height: 14px; color: #fff; background-color: #00C5F5; line-height: 14px; text-align: center; border-radius: 50%;}i::after{ content: "i";}原创 2021-10-20 19:30:42 · 328 阅读 · 0 评论 -
[css] 使用iframe底部留白
经了解, iframe是一个内联框架,属于内联元素,可能会出现间距空白问题下面两个属性均可解决问题vertical-align: bottom;display: block;<iframe border="0" style="display:block;" width="" height="" frameborder="0" scrolling="no" src="" ></iframe> <iframe border="0" style="vertic原创 2021-10-18 11:25:50 · 304 阅读 · 0 评论 -
[css3] 小案例---旋转立方体
技术:animation: donghua 8s linear infinite;transform: rotateX(30deg);transform: rotateY(30deg) ;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2021-08-18 19:16:03 · 89 阅读 · 0 评论 -
[css3] 小案例---旋转立方体
技术:animation: donghua 5s linear infinite;transform: translateX(-100px) rotateY(-90deg);<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met原创 2021-08-18 19:09:28 · 66 阅读 · 0 评论 -
[css] 剩余宽度自适应
calc(100% - 200px);注意有空格才能生效<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scal原创 2021-08-09 12:08:54 · 608 阅读 · 1 评论