冷门但是很实用的CSS样式

  • 2020 年 04 月 13 日
  • 364
  • 750 字
  • 2 条评论

下面是自己在写主题的时候学习到的一些冷门,但是很实用的CSS样式,发现通过学习这些样式,自己前端的B格又提升了呢

::-Webkit-Input-Placeholder

input 的 H5 placeholder 属性,很好用,但不能直接改这个文字颜色,所以目前的解决方法就是用::input-placeholder这个伪元素来改。配合 opacity 属性使用效果更佳哦!

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

@Import

嵌套样式表文件。使用它可以在样式表再次内嵌套样式表文件,比如一些组件CSS可以使用,但不太推荐使用这个,因为加载时有可能会被漏掉,这点就很让人头疼。

@import url("nmsl.css");
@import url("awsl.css");

Outline

当点击Input元素时显示的当前状态线(外发光)。这个状态线是用来提示用户当前状态指示作用,但因为效果很辣鸡,建议去掉,或自己改个样式

div {
    outline: none; //移动浏览器默认的状态线
    // outline: 5px dotted red; 也可以设置样式
}

Contenteditable

contentEditable 属性用于设置或返回元素的内容是否可编辑。

<p contenteditable="true">可编辑</p>

Webkit-Playsinline

手机video 都可以在页面中播放,而不是全屏播放了。

<video id="myvideo" src="test.mp4" webkit-playsinline="true"></video>

使用 Clearfix 清楚浮动,解决父类高度崩塌。

.clearfix {
    zoom: 1;
}

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
 }

User-Select 禁止用户选中文本

div {
    user-select: none; /* Standard syntax */
}

清除手机Tap事件后Element 时候出现的一个高亮

*{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

::-Webkit-Scrollbar-Thumb

可以修改谷歌的滚动条样式,safari好像也可以

-Webkit-Appearance:none

移除浏览器默认的样式,比如chrome的input默认样式

input, button, textarea, select {
    *font-size: 100%;
    -webkit-appearance:none;
}

CSS开启硬件加速

CSS animations, transforms 以及 transitions 不会自动开启GPU加速,而是由浏览器的缓慢的软件渲染引擎来执行。那我们怎样才可以切换到GPU模式呢,很多浏览器提供了某些触发的CSS规则。

现在,像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速,当它们检测到页面中某个DOM元素应用了某些CSS规则时就会开启,最显著的特征的元素的3D变换。

可是在一些情况下,我们并不需要对元素应用3D变换的效果,那怎么办呢?这时候我们可以使用个小技巧“欺骗”浏览器来开启硬件加速。

虽然我们可能不想对元素应用3D变换,可我们一样可以开启3D引擎。例如我们可以用transform: translateZ(0); 来开启硬件加速 。

-webkit-transform: translateZ(0);

使用CSS Transforms 或者 Animations时可能会有页面闪烁的Bug

-webkit-backface-visibility: hidden;

-Webkit-Touch-Callout 禁止长按链接与图片弹出菜单

-webkit-touch-callout: none;

Transform-Style: Preserve-3d 让元素支持3d

div {
    -webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */
    -webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
    transform: rotateY(60deg);
    transform-style: preserve-3d;
}

Perspective 透视

这个属性的存在决定你看到的元素是2d还是3d。一般设置在包裹元素的父类上。

.div-box {
    perspective: 400px;
}

Css实现不换行、自动换行、强制换行

//不换行
white-space:nowrap;

//自动换行
word-wrap: break-word;
word-break: normal;

//强制换行
word-break:break-all;

Box-Sizing 让元素的宽度、高度包含Border和Padding

{
    box-sizing: border-box;
}

Calc() Function, 计算属性值

div {
    width: calc(100% - 100px);
}

上面的例子就是让宽度为100%减去100px的值,项目中很适用,要IE9以上兼容。

Css3 Linear-Gradient 线性渐变

默认开始在top, 也可以自定义方向。

div {
    linear-gradient(red, yellow)
}

background: linear-gradient(direction, color-stop1, color-stop2, ...);

常用的选择器 :Nth-Child() Selector

以下代码是选择父类下第一个子节点,p元素,建议学习这个样式属性的使用,很实用的。

p:nth-child(1) {
    ...
}

版权属于:Veen Zhao

本文链接:https://blog.zwying.com/archives/31.html


—— 收到 2 条评论 ——

    Xiaomo
    2020 年 04 月 21 日 02:15

    手机上看这篇文章后半部分是彩蛋嘛

    2020 年 04 月 17 日 16:07

    又发现一个30 seconds of css!

OωO