样式问题
1、父元素设置了border-radius,子元素应用了transform,并且父元素设置了overflow:hidden,但是却失效?
// 给父元素设置 { position:relative; z-index:1; }
2、设置input 文本框的 placeholder 的颜色
input::-webkit-input-placeholder{ color:rgba(144,147,153,1); }
3、如何设置body背景色,height:100%,不生效?
同时设置html,body的高度 html,body{ height:100%; } 或 body{ height: 100vh; // 代表占屏幕100% }
4、一像素边框的问题
.row { position: relative; &:after{ content: ""; position: absolute; left: 0; top: 0; width: 200%; border-bottom:1px solid #e6e6e6; color: red; height: 200%; -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(0.5); transform: scale(0.5); pointer-events: none; /* 防止点击触发 */ box-sizing: border-box; } }
5、css属性touch-action:none;
该属性会导致安卓页面无法滚动,慎用!
6、去除ios 手机端input输入框的内阴影
input{ -webkit-appearance: none; }
7、安卓手机端div里面在包一层div,文字展示不居中的问题。
最好给div设置padding ,不固定高度和不设置line-height;
8、iOS端input输入框光标错位
是由于fixed定位引起的,改成absolute就解决了。
.box{ position: absolute; }
9、div实现背景色和背景图片同时存在
{ background-color: #fff; background-image:url('../../assets/img/model-bg.png'); background-repeat: no-repeat; }
10、css 制作椭圆
border-radius可以单独设置水平和垂直的半径,只需要用一个斜杠(/)分隔这二个值就行。
此外我们还要知道border-radius不仅可以接受长度值还可以接受百分比值。
{ width: 150px; height: 100px; border-radius: 50%/50%; //简写属性:border-radius:50% background: brown; }
11、图片居中显示
object-fit: cover;