S筱潇S四维Smile

<hr style='background-color:blue; height:1px; border:none;''/>hr标签是线条，其颜色要用background-color；再给线条设置一个height，正常粗细就是1px，设置完后线条变粗；那是因为hr有默认的border，需要将它的边框去掉，设为border:none以上三点缺一不可...

平时项目中常用的animate.css即可满足需求方便我平时使用，写几个常用：/* 放大缩小 */.scalebigbig { animation: scalebigbig 3s infinite ease;}@keyframes scalebigbig { 0% { transform: scale(1); -webkit-transform: scale(1); } 50% { transform: scale(1.2); -webkit-transfo

在项目中改变 SCSS 变量Element 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element 的样式变量。新建一个样式文件，例如 element-variables.scss，写入以下内容：/* 改变主题色变量 */$--color-primary: #1aa;/* 改变 icon 字体路径变量，必需 */$--font-path: '~element-ui/lib/theme-chalk/fonts';@impo

今天遇到了使用css3动画的元素层级被放大置顶的问题，ios浏览器上没问题，安卓原生浏览器和安卓微信上有问题。使用了css3动画的元素z-index失效，兄弟元素设置多高的z-index都盖不住解决办法就是父元素设置 transform-style:preserve-3d;需要解决层级问题的所有元素都加上transform:translateZ(0);translateZ()的值随元素层级自行设置...

/* 卡片翻转 */.roateCard { -webkit-animation-name: roateCard; animation-name: roateCard; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}@keyframes roateCard { 0% { .

添加css即可，亲测有效-webkit-backface-visibility: hidden;-webkit-transform: translate3d(0, 0, 0);

transform-origin属性默认情况，变形的原点在元素的中心点，或者是元素X轴和Y轴的50%处。我们没有使用transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、移位、缩放等操作都是以元素自己中心（变形原点）位置进行变形的。但很多时候需要在不同的位置对元素进行变形操作，我们就可以使用transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。如果我们把元素变换原点（transform-origin）设置0（x） 0（

使用一下样式即可： ::-webkit-scrollbar { width: 0px; }

wxss文件添加这些代码即可实现 overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-all; /* 追加这一行代码 */

原理：阻止ios和安卓调整字体大小时候的事件，ios通过添加css属性，安卓通过微信属性去阻止注：添加后无法通过外部更改字体大小，根据项目需求运用ios系统：body{ -webkit-text-size-adjust: 100% !important;}安卓系统：(function() { if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "functio

button::after{ border: none;}

小程序中div设置了高度，可是文本就是不换行，添加下面一行css即可：使用 css 属性 ：white-space:pre-wrap

一、盒子没有固定的宽和高方案1、Transforms 变形这是最简单的方法，不仅能实现绝对居中同样的效果，也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%) 必须加上top: 50%; left: 50%;优点：1.内容可变高度2.代码量少缺点：1.IE8不支持2....

Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性{ -webkit-text-size-adjust: none; }解决。

单行文本溢出....text-over{ width:200px; overflow: hidden; text-overflow:ellipsis;//文本溢出显示省略号 white-space:nowrap;//文本不换行}多行文本溢出....text-over{ overflow : hidden; text-over...

::-webkit-input-placeholder { /* WebKit browsers */ color: #FFFFFF;}:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #FFFFFF;}::-moz-placeholder { /* Mozilla Firefox 19+ */...

1、什么是盒子模型？在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。2、行内元素有哪些？块级元素有哪些？ 空(void)元素有...

-webkit-tap-highlight-color:rgba(255,255,255,0);input[type="text"], input[type="button"], input[type="submit"], input[type="reset"], select, textarea,button { -webkit-appearance: none;}input:-...

在线字体格式转换地址：https://www.fontke.com/tool/convfont/ @font-face {font-family: 'YourWebFontName';src: url('YourWebFontName.eot'); /* IE9 Compat Modes */src: url('YourWebFontName.eot?#iefix') format('...

主要摘自：《CSS 揭秘》，强烈推荐的一本书。“44 年前我们就把人类送上月球了，但现在我们仍然无法在 CSS 中 实现垂直居中。”——James Anderson(https://twitter.com/jsa/ status/358603820516917249)在 CSS 中对元素进行水平居中是非常简单的：如果它是一个行内元素， 就对它的父元素应用 text-align: cen...

如图所示：如果一个父元素设置了overflow:hidden属于的同时还设置了border-radius属性，那么如果想隐藏超出的子元素，四个圆角处会出现超出圆角依然显示的bug；解决办法：只需在父元素设置即可：方法1、transform: rotate(0deg);方法2、position: relative; z-index:1; ...

1.html ：监听input失去焦点和获取焦点的事件&lt;input type="date" id="date" v-model="birthday" placeholder="出生年月日" @blur="inputBlur($event)" @focus="inputFocus($event)" /&gt;2.css:用伪类去为input模拟一个pl

1.html ：创建几个流星&lt;div class="meteor-body"&gt; &lt;div class="main-con"&gt; &lt;div class="shooting_star"&gt;&lt;/div&gt; &lt;div class="shooting_star"&gt;&lt;/div&a

input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px white inset !important; }