css
閉丄眼聆厛倖輻
这个作者很懒,什么都没留下…
展开
-
取消input边框和防止拖拽文本域
取消表单轮廓outline:none;防止文本域拖拽resize:none;原创 2021-09-02 19:22:01 · 291 阅读 · 0 评论 -
解决图片没有沾满盒子问题,底部出现空白
原因:图片底侧出现空白,原因是行内块元素会和文字基线对齐,解决办法:一:给图片添加:vertical-align:middle|top|bottom;等二:把图片转变为行内块元素:display:block;原创 2021-08-31 20:20:22 · 262 阅读 · 0 评论 -
HTML5,CSS3
盒子模型:加了border,padding,不会撑开盒子 box-sizing: border-box;图片模糊: filter: blur(5px);计算宽度计算 width: calc(100%-50px);原创 2021-08-30 08:20:48 · 54 阅读 · 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 · 56 阅读 · 0 评论 -
CSS3过渡效果
移入过渡:宽高,颜色,边距都可以.box:hover{transition: 要过渡的属性 花费时间 运动曲线 何时开始;}通常写为:.box:hover{transition: all 1s;}原创 2021-08-28 14:03:09 · 45 阅读 · 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 · 74 阅读 · 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 · 42 阅读 · 0 评论