CSS3
在线小白www
这个作者很懒,什么都没留下…
展开
-
translate3d:(0,0,0)
触发GPU硬件加速!让动画更流畅。原创 2021-10-08 15:16:24 · 283 阅读 · 0 评论 -
input无法和其他元素对齐
vertical-align:middle;原创 2021-10-08 10:44:10 · 183 阅读 · 0 评论 -
移动端开发点击元素会闪一下或者出现黑色背景
网页在pc端点击元素时没有闪烁,但是在移动端会出现明显的闪烁。给元素添加属性-webkit-tap-highlight-color:transparent;原创 2021-09-24 09:50:52 · 550 阅读 · 0 评论 -
移动端文字被放大-webkit-text-size-adjust
PC端页面文字在移动端没有等比例缩小,而是变得很大,设置html,body{-webkit-text-size-adjust: 100%;}-webkit-text-size-adjust 的本职是用于mobile的,见规范CSS Mobile Text Size Adjustment Module Level 1 和 apple 的 Safari Web Content Guide。之所以现在的桌面版webkit浏览器支持他,是因为实际上这是一下bug。Bug 56543 – CSS pro.转载 2021-09-24 09:42:46 · 927 阅读 · 0 评论 -
css隐藏自带的滚动轴,并修改滚动条样式(兼容版)
第一种::-webkit-scrollbar { display: none; }缺点:不通用,兼容性差。IE不兼容第二种/*webkit内核*/::-webkit-scrollbar { width:0px; height:0px;}::-webkit-scrollbar-button { background-color:rgba(0,0,0,0);}::-webkit-scrollbar-track {原创 2021-06-21 17:09:29 · 437 阅读 · 0 评论 -
css实现旋转、放大
1. 旋转不放大<img src="./2.jpg" alt="" class="img"> img{ animation: rotation 3s linear infinite; } /*旋转动画*/ @keyframes rotation { to { transform:rotate(1turn); } }2. 边旋转边放大 img{ animation原创 2021-06-17 12:01:10 · 969 阅读 · 0 评论 -
左边盒子高度随右边盒子高度的变化而变化
1. flex布局flex布局需要注意的是不要在设置display:flex的盒子上设置高度,否则里面的两个盒子会继承这个高度,当设置的宽度小于里面的盒子的宽度时,会压缩里面两个盒子的宽度。html <div class="box"> <div class="content clearfix"> <div class="left-box"><span>我是左侧</span></div> <di原创 2021-06-16 11:25:53 · 1288 阅读 · 1 评论 -
三栏布局的五种方式
1. 浮动布局 <div class="con"> <div class="left">left</div> <div class="right">right</div> <div class="middle">middle</div> </div> .con div { min-height: 200px; } .left { .转载 2021-06-15 15:13:34 · 191 阅读 · 0 评论 -
两栏布局的几种方式
<div class="con"> <div class="left">left</div> <div class="right">right</div> </div>1. float + margin-left .left { float: left; width: 200px; height: 200px; background-color: a..原创 2021-06-15 11:53:54 · 137 阅读 · 1 评论 -
css实现平行四边形
.box1 { width: 100px; height: 100px; background-color: #8f9bec; transform: skew(-20deg,0); -ms-transfotm:skew(-20deg,0); -webkit-transform:skew(-20deg,0); -moz-transform:skew(-20deg,0); -o-transform:skew(-20.原创 2021-06-09 15:47:30 · 175 阅读 · 0 评论 -
图片自适应大小
1. img标签 - - object-fitobject-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。object-fit 一般用于 img 和 video 标签,一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。缺点:IE不支持contain:保持图片原始的长宽比,调整图片尺寸,使高度或宽度(两者中较长的一个)能够适应给定的尺寸。cover:保持图片原始的长宽比,图像区域完全被图片完全覆盖。fill:默认值。图片完全填充于图像区域,即使付出会损失原始长宽原创 2021-05-10 18:23:44 · 437 阅读 · 0 评论 -
box-shadow多用
1. 在盒子底部实现圆形阴影效果这里主要用到了伪元素、阴影<div class="box"></div> .box{ padding: 30px; background: white; border-radius: 5px; width: 400px; height: 200px; margin: auto; box-shadow: 0 0 5px rgba(0, 0, 0, .1);原创 2021-03-24 11:06:45 · 232 阅读 · 0 评论