特殊css

哎呦喂
695 阅读11分钟

今天给大家介绍一些乍一眼需要javascript处理的事情，css就能处理。这些功能css， 完全可以替代js

1. 每个单词的首字母大写

js做法

function capitalizeFirst(str) {
    return str.toLowerCase().replace(/(|^)[a-z]/g, function(L){ L.toUpperCase() });
};

css方案如下：

.capitalize-first{
text-transform: capitalize;
}

text-transform 简单介绍

这是 CSS2 中的属性，参数有 capitalize | uppercase | lowercase | none

  • none：默认。定义带有小写字母和大写字母的标准的文本。
  • capitalize：文本中的每个单词以大写字母开头。
  • uppercase：定义仅有大写字母。
  • lowercase：定义无大写字母，仅有小写字母。

2. 单选高亮

可能有些人用的是js,别人我不知道。我自己最开始是用js.这个可以用css

<div class="single-check" >
	<input class="input" type="radio" name="colors" value="1">
	<div class="colors">天空之境</div>
</div>
---css

两个选择器的区别:

  • ~选择器：查找某个元素后面的所有兄弟元素
  • +选择器: 查找某个元素后面紧邻的兄弟元素

3、多列等高问题

pc 端的客户画像需求时，遇到需要左右两边等到的需求（左边块的高度会随着内容变化） 最初我使用的 JS 计算高度再赋值，可是这样会有页面闪动的效果。所以找到了两种CSS 的处理方案：

  • 每列设置一个很大的 padding，再设置一个很大的负的 margin
  • 使用 display:table;

4、修改鼠标手势图标

很多童鞋可能都用过：

cursor: pointer | wait | hand | text | move | not-allowed;

用户自定义图片

cursor: url(jartto.cur)

记得在定义完自定义的游标之后在末尾加上一般性的游标，以防那些url所定义的游标不能使用

超好用的 currentColor

.icon {
  display: inline-block;
  width: 16px; 
  height: 20px;
  background-image: url(http:jartto.wang/test.png);
  background-color: currentColor; /* 该颜色控制图标的颜色 */
  background-position: 0 0;
}
.link:hover {
  color: #333; /* 虽然改变的是文字颜色，但是图标颜色也一起变化了 */
}

currentColor 表示“当前的标签所继承的文字颜色”

5、png 图片如何改颜色

网页中大多使用透明图片 png 格式，可是如果有天产品经理说，这个图标颜色能不能改成红色，恰巧设计师不能支持你，你该如何办 其一：ps一下图片，换个颜色； 其二：只能上 svg 喽，搞成 iconfont； 这里，我们来说第三种方式，妙不妙可以试试哦！

.icon {
  display: inline-block;
  width: 20px; 
  height: 20px;
  overflow: hidden;
}
.icon-del {
  background: url(delete.png) no-repeat center;
}
.icon > .icon {
  position: relative;
  left: -20px;
  border-right: 20px solid transparent; /*下文注意点 2 有解释*/
  -webkit-filter: drop-shadow(20px 0);
  filter: drop-shadow(20px 0);    
}

html代码

<p><strong>原始图标</strong></p>
<i class="icon icon-del"></i>
<p><strong>可以变色的图标</strong></p>
<i class="icon"><i class="icon icon-del"></i></i>

需要注意几点：

  • 1.对于背景透明的 png 小图标而言，如果我们施加一个不带模糊的投影，就等同于生成了另外一个颜色的小图标；
  • 2.在 chrome 浏览器下，如果一个元素的主体部分，无论以何种方式，只要在页面中不可见，其 drop-shadow 是不可见的。实体部分哪怕有 1px 可见，则 drop-shadow 完全可见 演示地址： www.zhangxinxu.com/study/20160…

原理其实很简单，使用了 css3 滤镜 filter 中的 drop-shadow，drop-shadow 滤镜可以给元素或图片非透明区域添加投影

6、去掉 chrome表单自动填充去掉input黄色背景解决方案

当我们在做登陆页面的时候，在 chrome 中 input 会带上自动补全的黄色背景，大大影响美观。很多网站都没有去处理，但这并不难处理 方案1：

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0.5) inset !important;
}

方案2：

input:-webkit-autofill {
  -webkit-animation-name: autofill;
  -webkit-animation-fill-mode: both;
}

@-webkit-keyframes autofill {
  to {
    color: #fff;
    background: transparent;
  }
}

7、chrome 中设置小于 12px 的字体

这种比较少见，但是有些设计师也会提这个需求。利用transform的 scale(0.9)

.font-less-12 {
 cursor: pointer;
 font-size: 10px;
 display: inline-block;
 -webkit-text-size-adjust: none; // 不支持
 transform: scale(0.9);
}

8、0.5px 的border

html代码

<div class="bd-t"></div>

css代码

  • 方案1：使用渐变 linear-gradient 来操作，但需要注意浏览器兼容前缀
.bd-t{
  position:relative;
}

.bd-t::after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background-image: linear-gradient(0deg, transparent 50%, #e0e0e0 50%);
}

注意有坑 对于不同浏览器的兼容，我们需要使用不同的前缀如：

  • -webkit-linear-gradient
  • -ms-linear-gradient
  • -o-linear-gradient

方案2：缩放 scale 处理

div::after{
  content: "";
  display: block;
  position: absolute;
  left: -50%;
  bottom: 0;
  width: 200%;
  height: 1px;
  background: #c3c3c3;
  -webkit-transform: scale(0.5);
}

9、border 颜色渐变

border-color:red green blue pink;

10、有趣的 drop-shadow

用法如下：

filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);
filter:drop-shadow(5px 5px 10px black)

CSS3 滤镜 filter 中的 drop-shadow，drop-shadow 滤镜可以给元素或图片非透明区域添加投影。

上文中已经提到了一种使用场景，这里还想说另一种，即使用拼凑法作出的小气泡，如果气泡需要阴影的话，请用 drop-shadow 来替代 box-shadow 更多细节请查看：drop-shadow 滤镜与 box-shadow 区别应用 www.zhangxinxu.com/wordpress/2…

11、:not伪类可能错误的认识

1. 连续否定的逻辑错误

例如，如果我们想要匹配既不包含.disabled类名，又不包含.read-only类名的input元素，我们的选择器该如何书写，很多人会使用下面的CSS代码：

input:not(.disabled),
input:not(.read-only) {}

咋看没问题，上面的书写是大大的错误

逗号分隔的选择器，表示的是“或”的关系，而不是“与”的关系。因此input:not(.disabled), input:not(.read-only)表示的含义是：不包含.disabled类名的input元素，或者不包含.read-only类名的input元素。 最后导致的结果是.disabled类名和.read-only类名元素都会匹配。 

/* 正确的书写 */
input:not(.disabled):not(.read-only) {}
  1. 全局否定的逻辑错误 例如我们希望除了article标签下的p元素的margin值都是0，我们代码该怎么。 很多人会这样书写
:not(article) p {
    margin: 0;
}

看上去没有问题，实际上问题非常严重，:not(article)p实际语义是，如果p元素的祖先元素的标签名不是article，则margin值是0

其中就包括这样的场景： 

<article>
    <section>
        <p>margin此时也是0！<p>
    </section>
</article>

此时，虽然p元素在article元素内，但是，由于同时也在section元素内，于是匹配了:not(article) p这个选择器，导致出现意料之外的样式表现。

正确的书写应该是： 

p {
    margin: 0;
}
article p {
    margin: 1em 0;
}

咦？不能使用:not伪类实现吗？对的，在这种场景下，:not伪类是无解的。

除非强制层级元素，也就是p元素是article的相邻子元素元素，此时我们可以使用下面CSS满足我们需求，不过限制很大，建议还是使用传统重置策略：

:not(article) > p {
    margin: 0;
}

12、波浪线动画效果

原理：使用径向渐变纯CSS实现，就是使用径向渐变绘制我们的波浪线效果，一个波浪线循环段是有一个朝上的半个圆弧和一个朝下的半个圆弧组合而成的。

所以，我们只要使用径向渐变绘制圆弧，再通过background-position控制两个圆弧的位置，让其前后拼接在一起就可以实现波浪线效果

相关CSS代码如下：

.flow-wave {
    background: radial-gradient(circle at 10px -7px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x,
        radial-gradient(circle at 10px 27px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x;
    background-size: 20px 20px;
    background-position: -10px calc(100% + 16px), 0 calc(100% - 4px);
}

.flow-wave {
    animation: waveFlow 1s infinite linear;
}
@keyframes waveFlow {
    from { background-position-x: -10px, 0; }
    to { background-position-x: -30px, -20px; }
}

13、CSS实现平行四边形Shapes布局

一提到平行四边形，条件反射般的就会想起CSS transform中的skew()/skewX()/skewY()方法，可以让元素斜切，从而实现平行四边形效果 HTML如下：

<div class="input-x">
    <input class="input" placeholder="您的姓名">
</div>

CSS如下，形状的关键就是下面红色高亮的transform:skewX(-10deg)：

.input-x {
    display: inline-block;
    position: relative;
    z-index: 0;
}
.input-x::before {
    content: '';
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    border: 2px solid #ddd;
    background-color: #fff;
    border-radius: 4px;
    transform: skewX(-10deg);
    z-index: -1;    
}
.input {
    display: block;
    padding: 8px 10px;
    border: 0; background: none;
}

然而，一开始的布局不仅后面的白色背景形成平行四边形，整段文字内容也按照平行四边形的格式进行了排版，如果文字内容也应用skewX，所有文字内容就会表现为倾斜 这就是skewX方法的局限

借助CSS Shapes布局

image.zhangxinxu.com/image/blog/…

html代码

<!-- 左三角 -->
<div class="shape-left"></div>
<!-- 右三角 -->
<div class="shape-right"></div>
<content class="content">
   ...内容...
</content>

相关CSS代码如下:

.shape-left {
    float: left;
    width: 200px; height: 500px;
    /* 倒三角 */
    shape-outside: polygon(0 0, 100% 0, 0% 100%);
}
.shape-right {
    float: right;
    width: 200px; height: 500px;
    /* 正三角 */
    shape-outside: polygon(100% 0, 100% 100%, 0 100%);
}
.content {
    display: block;
}

.shape-left元素左浮动同时设置shape-outside为倒三角，.shape-right元素右浮动同时设置shape-outside为正三角，此时，元素里面的文字内容就自动在剩余空间环绕排版，形成平行四边形布局效果

以后遇到不规则形状布局，要有条件反射般的思维——CSS Shapes布局

14、如何借助content属性显示CSS var变量值

  • 1 变量作为字符动态呈现

CSS var变量（CSS自定义属性）很好用，然后，有时候，需要这些变量能够同时作为字符在页面中呈现，我们想到的是使用::before/::after伪元素配合content属性，但是，把CSS变量直接作为content属性值是没有任何效果的

/* 无效 */
.bar::before {
    content: var(--percent);
}

那该如何呈现呢

  • 2 借助CSS计数器呈现CSS var变量值
/* 有效 */
.bar::before {
    counter-reset: progress var(--percent);
    content: counter(progress);
}

也就是虽然content属性本身不支持变量，但是counter-reset属性后面的计数器初始值是支持的，于是我们可以来一招移花接木让CSS var变量值作为字符在页面中显示

来个进度条案例

<label>图片1：</label>
<div class="bar" style="--percent: 60;"></div>
<label>图片2：</label>
<div class="bar" style="--percent: 40;"></div>
<label>图片3：</label>
<div class="bar" style="--percent: 20;"></div>

bar {
    height: 20px; width: 300px;
    background-color: #f5f5f5;
}
.bar::before {
    display: block;
    counter-reset: progress var(--percent);
    content: counter(progress) '%\2002';
    width: calc(1% * var(--percent));
    color: #fff;
    background-color: #2486ff;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
}

CSS百分比变量与进度条demo www.zhangxinxu.com/study/20190…

15、CSS counter计数器

CSS计数器只能跟content属性在一起的时候才有作用，而content属性貌似专门用在before/after伪元素上的。于是，就有了，“计数器↔伪元素↔content属性”的铁三角关系

CSS计数器的2个属性和1个方法，依次是：

    1. counter-reset 计数器-重置,默认是0,可以是负数，例如-2。也可以写成小数，例如2.99，不过就是IE和FireFox都不识别，认为是不合法数值，直接无视，当作默认值0来处理；不过Chrome不嫌贫嫉富，任何小数都是向下取整，如2.99当成2处理;多个计数器可同时命名
.xxx { counter-reset: wangxiaoer 2 wangxiaosan 3; }

直接空格分隔，譬如逗号什么的都不行

    1. counter-increment 就是“计数器-递增”的意思。值为counter-reset的1个或多个关键字。后面可以跟随数字，表示每次计数的变化值。如果缺省，则使用默认变化值1（方便起见，下面的都使用默认值做说明）

CSS的计数器的计数是有一套规则的，我将之形象地称为“普照规则”。具体来讲就是：普照源(counter-reset)唯一，每普照(counter-increment)1次，普照源增加1次计数值

于是，我们可以解释上面提到的“默认值是0”的问题。通常CSS计数器应用的时候，我们都会使用counter-increment, 肯定要用这个，否则怎么递增呢！而且一般都是1次普照，正好+1，第一个计数的值就是1啦(0+1=1)！ Demo相关核心代码为： 
<p class="counter"></p>
.counter { counter-reset: wangxiaoer 2; counter-increment: wangxiaoer; }
.counter:before { content: counter(wangxiaoer); }

案例： www.zhangxinxu.com/study/20140… 案例：www.zhangxinxu.com/study/20140…

也可以普照自身，也就是counter-increment直接设置在伪元素上：

<p class="counter"></p>  // 3
.counter { counter-reset: wangxiaoer 2; }
.counter:before { content: counter(wangxiaoer); counter-increment: wangxiaoer; }

依然是1次普照，依旧全局的计数器+1，所以，显示的数值还是3

.counter { counter-reset: wangxiaoer 2; counter-increment: wangxiaoer; }
.counter:before { content: counter(wangxiaoer); counter-increment: wangxiaoer; }
<p class="counter"></p>    // 显示的是4
    1. counter() 只要有counter-increment，对应的计数器的值就会变化，counter()只是输出而已

www.zhangxinxu.com/wordpress/2…

以上就是这次的分享。谢谢

avatar
文章
阅读
粉丝