css
閉丄眼聆厛倖輻
这个作者很懒,什么都没留下…
展开
-
取消input边框和防止拖拽文本域
取消表单轮廓 outline:none; 防止文本域拖拽 resize:none;原创 2021-09-02 19:22:01 · 319 阅读 · 0 评论 -
解决图片没有沾满盒子问题,底部出现空白
原因:图片底侧出现空白,原因是行内块元素会和文字基线对齐, 解决办法: 一: 给图片添加:vertical-align:middle|top|bottom;等 二: 把图片转变为行内块元素:display:block;原创 2021-08-31 20:20:22 · 287 阅读 · 0 评论 -
HTML5,CSS3
盒子模型:加了border,padding,不会撑开盒子 box-sizing: border-box; 图片模糊: filter: blur(5px); 计算宽度计算 width: calc(100%-50px);原创 2021-08-30 08:20:48 · 67 阅读 · 0 评论 -
CSS3(2D转换)
2D转换 平移 这是移动x,y轴,平移 transform: translate(x,y); 可以分开写: .box{ transform:translateX(); transform:translateY(); } 旋转:旋转45度,顺时针为正 .box{ transform: rotate(45deg); } 缩放:缩放宽高 .box{ transform: scale(x,y); } 缩放倍数 .box{ transform: scale(1.1); } 动画原创 2021-08-30 08:20:15 · 68 阅读 · 0 评论 -
CSS3过渡效果
移入过渡:宽高,颜色,边距都可以 .box:hover{ transition: 要过渡的属性 花费时间 运动曲线 何时开始; } 通常写为: .box:hover{ transition: all 1s; }原创 2021-08-28 14:03:09 · 52 阅读 · 0 评论 -
CSS中的精灵图
主要是在背景添加一个图片 background-image:url('bgdesert.jpg') 设置精灵图的平铺方向 background-repeat:repeat-x; 设置定位与不平铺 background-repeat:no-repeat; 精灵图的偏移量 background-position:right top;(可以设置像素) 简写: background:#ffffff url('img_tree.png') no-repeat right top; ...原创 2021-08-27 08:41:27 · 80 阅读 · 0 评论 -
CSS文本超出隐藏,带省略号,多行省略
当是单行省略 overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 多行省略 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; //作为弹性伸缩盒子模型显示。 -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--原创 2021-07-27 20:01:45 · 51 阅读 · 0 评论