CSS专题

Cloud9
224 阅读3分钟

文字渐变

涉及到属性有

  • background-image 它的其中一个值可以是linear-gradient。参考这里
  • -webkit-background-clip 实验中 -webkit-background-clip:text; 背景被裁剪成文字的前景色。参考这里
  • -webkit-text-fill-color 文字的填充颜色

案例

描边

发现选中icon的勾勾细了很多

使用了stroke

未使用stroke

关于stroke

动画

transition 过渡

如果是width或height属性，必须硬编码给定明确的值才能transition。如果是auto，transition不生效

transition生效的必要条件

  • 属性必须发生变动 动态添加class或者:hover :focus等
input[type=text] {
  width: 100px;
  transition: width .35s ease-in-out;
}

input[type=text]:focus {
  width: 250px;
}

保持height:auto实现动画的三种方案，参见Using CSS Transitions on Auto Dimensions

animate 动画

flex-baisc

box-shadow与overflow

参考

hairline & hairline-border

利用after+transform来做 参考

// hairline
.hairline{
  position: relative;
  border:none;
}
.hairline::after{
  content: '';
  position: absolute;
  bottom: 0;
  background: #eee;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
  transform-origin: 0 0;
}

// hairline-border
.hairline-border{
  position: relative;
}
.hairline-border::after{
  pointer-events: none;
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  border-width: 1px;
  border-style: solid;
  transform: scale(0.5,0.5);
  box-sizing: border-box;
  border-color: #ddd;
}

px & pt & dpr

参考

相关概念

  • 英尺[inch]
    • 1inch = 2.54cm
  • 设备像素(物理像素)[device pixel, dp]: 指设备能控制显示的最小物理单位，意指显示器上一个个的点。单位pt。iPhone 5 的分辨率为 640 x 1136px
    • 1pt = 1/72(inch)
    • 1pt = 1/72*2.54(cm) = 0.03528(cm)
  • css像素(虚拟像素)[css pixel]：CSS 中的 px 是一个相对长度，它相对的，是 viewing device 的分辨率。这个 viewing device，通常就是电脑显示器。典型的电脑显示器的分辨率是96DPI，也就是1像素为1/96英寸. iPhone 5 的 CSS 像素数为 320 x 568px
    • 1px = 1/96(inch)
    • 1px = 1/96*2.54cm = 0.02646(cm)

由此可以得出结论在电脑上72pt=96px，证明如下()

更进一步，px受哪些因素的影响

  • 每英寸像素[PPI]:它表示的是每英寸所拥有的像素(pixel)数目，更确切的说法应该是像素密度
  • 设备像素比[dpr]:它描述的是未缩放状态下，设备像素和 CSS 像素的初始比例关系。例如dpr=2，则1px = 2*2 = 4pt
  • DPI每英寸多少个点 (DPI和PPI其实是同一个意思，PPI用来衡量工业标准)

Retina屏

在以前，iOS应用的资源图片中，同一张图通常有两个尺寸。你会看到文件名有的带@2x字样，有的不带。其中不带@2x的用在普通屏上，带@2x的用在Retina屏上。只要图片准备好，iOS会自己判断用哪张，Android道理也一样。

由此可以看出，苹果以普通屏为基准，给Retina屏定义了一个2倍的倍率（iPhone 6plus除外，它达到了3倍)

avatar
文章
阅读
粉丝