CSS – W3Schools 学习笔记 (3)

CSS Rounded Corners

Link to W3Schools

它是用来画圆角的, 假设有 1 给正方形, 100px.

border-top-left-radius: 30px;

before  after 

也可以用 percentage.

如果是正方形, 4 个角 50% 就变成圆形了.

常见的圆角按钮:

它是依据高度的 50% 来设定的, 不可以写 border-radius: 50%. 这个意思是 width 50%, height 50%, 正确的是全部 height 50%

 <-- 错误的

正确的写法是 border-radius: calc(100px / 2); 必须要知道高度才行.

CSS Border Images

Link to W3Schools

border: 10px solid transparent;
border-image: url(border.png) 30 round;

让 border-color 变成 transparent 加上 border-image 就可以了.

30 表示 where to slice the image

round 表示图片重复, 另一个是 stretched 拉紧.

image

round (repeat)

stretched

CSS Multiple Backgrounds

Link to W3Schools

background image 是可以 multiple 的

用逗号分开 1, 2

越靠前的越在上层, 用户越看见.

shorthand 的写法

Background Size

backgroud size 可以控制 background image 大小

background-size: 100px 80px;

也可以写 contain or cover

Background-origin Property

set background image render 位置

background-origin: content-box

border-box, 从 border 开始

padding-box (default), 从 padding 开始

content-box, 从内容开始

Background-clip Property

和 origin 一样, 也是 border-box, padding-box, content-box, 只是它是用来做 paint 的, 比如 color

background-clip: content-box;

CSS Color Keywords

Link to W3Schools

transparent, currentcolor, inherit

transparent 相对于 rgba(0,0,0,0)

currentcolor 对应 color 属性值

inherit 就是跟 parent

CSS Gradients

Link to W3Schools

Gradients 是渐变 color

3 大种类:

Linear Gradients (goes down/up/left/right/diagonally)

Radial Gradients (defined by their center)

Conic Gradients (rotated around a center point)

Linear Gradients

background-image: linear-gradient(to left, red, yellow);

它是 background-image 来的哦, 不是 color

最少 2 种颜色才能渐变.

默认是 top to bottom, 有很多 pattern, 比如 left to right, diagonal (对角线), degree 等

background-image: linear-gradient(to right, red 50%, yellow);

red 50% 从开始一直是纯红色到 50%, 然后渐变去黄色

background-image: linear-gradient(to right, red 25%, yellow 50%);

表示开始到 25% 纯红, 然后渐变去黄, 从 50% 的位置开始变成纯黄

Radial Gradients

Conic Gradients

CSS Shadow Effects

Link to W3Schools

Text Shadow

h1 {
  text-shadow: 2px 2px 5px red;
}

分别代表: horizontal, vertical, blur, color

没有 blur 的情况下, shadow 就是这样的, 看得出原理了.

通过逗号就可以写 multiple shadow 了.

Box Shadow

div {
  box-shadow: 10px 10px 5px 12px grey inset;
}

horizontal, vertical, blur, spread radius, color

horizontal, vertical 可以了解为 offset

blur 是指颜色展开 gradient 多长,  比如这个是 blur 100px 的意思

spread 非常像 border, 但不像 blur 那样是 gradient, 它是真实的颜色. 下面是 spread 20px blur 20px 的效果, blue 会在 spread 之后发生.

特别的地方是, 它的 default color 不是 background-color 而是 color (字体颜色) 哦.

spread radius 是让影子更大,

before after 

inset 是让 shadow 在里面, 效果很奇葩的

before  after 

也是可以 multiple shadow 哦

常见的用法

box-shadow: 0 0 8px 0px red;

效果, 左边发光

material 3 card

 

  box-shadow: 0 1px 2px 0 rgba($color: black, $alpha: 0.3),
    0 2px 6px 2px rgba($color: black, $alpha: 0.15);

效果

一边 shadow

参考: stackoverflow – How can I add a box-shadow on one side of an element?

box-shadow: 10px 0 10px -10px red;

关键就是 -10px spread, 它让 4 边都吃进去. 然后 10px blur 又长出来. 最后 10px 右就只有边被推出来, 所以看见了 shadow.

CSS Text Effects

Link to W3Schools

什么时候 text 会 overflow?

一个有 width 的 p, 如果内容超过了. 它会自动 new line.

p {
  width: 200px;
}

white-space: nowrap;

可以禁止 auto new lin, then 它就会 overflow

overflow: hidden;

overflow 之后字就被 cut 掉了

ellipsis

默认是 clip 就是剪掉

 text-overflow: ellipsis;

ellipsis 就会变成点点点

单个 word 太长, 也会 text overflow

就算没有 nowrap, 字太长也会 text overflow

word-wrap

word-wrap: break-word;

通过 break-word 可以强制 new line

word-break

word-break: break-all;

默认是 keep-all, 就是完整的 word 才可以 new line.

break-all 就是只要碰到边就把任何字给 break 了. 对比 word-wrap 只有在遇到超长字才会 break word.

第 1 张是 keep-all, 第 2 张是 break-all

CSS Web Fonts

Link to W3Schools

电脑常用的是 TTF/OTF

TTF 比较古老, Apple, Microsoft 一起出的, OTF 基于 TTF 是 MIcrosoft 出的.

Web 通常用 WOFF, 基于 TTF/OTF 做过优化. 新版是 WOFF2.

之前有提过, 要嘛用 build-in 字体, 要嘛 font-awesome, google font.(通过 link url)

如果要用自家的那么就需要 @font-face, 其实 font-awesome 和 google font 的 link url 也是 build @font-face 来的.

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

div {
  font-family: myFirstFont;
}

Bold 要另外写.

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

所以通常会有很多 @font-face 的. 看你要用到多少种.

CSS 2D Transforms

Link to W3Schools

translate(x,y)

放 minus 就是往左和上移动.

rotate(20deg)

旋转 20 度

scaleX(2)

x 是 width, default value 是 1 , 2 就是放大一倍 x2 的意思

scaleY(0.5)

y 是 height, 0.5 就是缩小了一倍 x0.5 的意思

scale(x,y)

x, y 一起 set

skewX(20deg), skewY(), skew()

skewX 是这样的效果, 不知道什么场景会用到啦. 现在知道了

matrix(scaleX(1),skewY(0),skewX(0),scaleY(1),translateX(0),translateY(0))

一起 set. 没有就放 default value 0,

Apply Multiple 2D Transforms

要 set 多个就用空格做分隔符

transform: scaleX(0.5) scaleY(0.5);

CSS 3D Transforms

Link to W3Schools

rotateX(10deg), rotateY(10deg), rotateZ(10deg)

效果看不懂, 只知道它和 2D 的 rotate(10deg) 差很多.

CSS Transitions

Link to W3Schools

5 个属性可以用

transition-property

transition-property: width;

watch propety width, 改变的时候就会有 animation

transition-delay

trasition-delay: 1s

delay 1 秒才触发

transition-duration

transition-duration: 1s

整个 animation 过程用时 1 秒

transition-timing-function

过度的体验, 比如 ease-in, ease-out 那些

transition

shorthand property

transition: width 2s linear 1s;

property, duration, function, delay

Apply Multiple

transition: width 1s, height 1s;
transition-property: width, height;
transition-duration: 1s, 1s;

property, shorthand 写法都是加逗号

CSS Animations

Link to W3Schools

@keyframes

animation 过程的 style

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

可以写任何 style property, % 就是 duration 到那个 % 时要出什么 style

animation-name, duration, delay, timing-function

div:hover {
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
  animation-timing-function: ease-in-out;
}

name 对应 @keyframes 的名字, duration, delay, timing-function 和 transition 一样.

animation-iteration-count

animation 跑完, 就会回到原本的 style. 要跑多几次就用 iteration

animation-iteration-count: 2;

animation-iteration-count: infinite; 无限次

animation-direction

normal, reverse, alternate, alternate-reverse

reverse 是从最后一个 @keyframes style 跑到第一个, 反过来执行.

alternate 是在最少跑 2 次才有用的, 第 1 次正常跑, 第 2 次 reverse 跑, 以此类推

alternate-reverse 是第一次跑 reverse, 第 2 次正常跑

animation-fill-mode

animation 跑完, 就会回到原本的 style.

by default, animation 的 style, 只会在 animation 过程中有效, 之前, 之后都不会有, 但 fill-mode 可以调.

animation-fill-mode: none, forwards, backwards, both

forwards 是跑完 animation 后把最后一个 keyframs's style apply 去 element. (注: apply 了就 lock 着了, 无法用 js 之类的去改它哦)

backwards 是当 delay 期间, 它会提前去拿 first keyframe's style 去 apply.

both 是 2 forwards + backwards

animation

shorthand property

animation: 3s ease-in 1s 2 reverse both paused slidein;

duration | easing-function | delay | iteration-count | direction | fill-mode | play-state | name (timeline 没有)

CSS Styling Images

Link to W3Schools

Filters

img {
  filter: grayscale(100%); // 黑白照
  filter: blur(4px); // 变萌
}

还有许多 effects, 但常用的就只有上面 2 个, 更多参考.

Flip image

镜子效果是通过 scaleX 来做的.

img:hover {
  transform: scaleX(-1);
}

CSS The object-fit Property

Link to W3Schools

object-fit 用来设定当具体的图片比 img element width, height 大 (同时 aspect ratio 也不一样) 的情况下要如果显示.

contain

上下或左右黑黑, 图片完整保留, 只是变小了.

cover

没有黑黑, 但是图片被 clip 了, 也变小了. (它会尽可能保留中间的内容)

fill

这个是 default, 图片会变形走样.

none

跟 cover 有点像, 只是它不会变小, 它就直接 clip 中间.

scale-down

the image is scaled down to the smallest version of none or contain. (不是很明白)

真实的情况下, 大部分 img element 只会设置 width 或 height, 比较少情况 2 个都 set. 如果只是 set 其中 1 个, 那么是不需要 object-fit 设定的, 图片会自动按比例缩写.

CSS The object-position Property

Link to W3Schools

object-position 通常搭配 cover 来用, 由于 cover 默认是取中心, 可能不一定美. 那么就可以通过 object-position 来调整.

object-position: 50% 100%;

用 % 来控制, horizontal, vertical (通常指需要控制 1 边, 另一边就放 100% 可以了)

percent 的玩法是上面这样.

CSS Masking

Link to W3Schools

masking 是在图片上盖一层东西, 可以是一张图, 或者一个遮罩层.

它可以做出这些效果

<div class="mask1">
    <img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</div>

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

CSS Variables - The var() Function

Link to W3Schools

var(name, fallback value)

:root {
  --blue: #1e90ff;
}

body { background-color: var(--blue, red); }

Local variable

button {
  --blue: #0000ff; /* local variable will override global */
  color: var(--blue);
}

Modify by Javascript

<script>
// Get the root element
var r = document.querySelector(':root');

// Create a function for getting a variable value
function myFunction_get() {
  // Get the styles (properties and values) for the root
  var rs = getComputedStyle(r);
  // Alert the value of the --blue variable
  alert("The value of --blue is: " + rs.getPropertyValue('--blue'));
}

// Create a function for setting a variable value
function myFunction_set() {
  // Set the value of variable --blue to another value (in this case "lightblue")
  r.style.setProperty('--blue', 'lightblue');
}
</script>

Modify by Media Query

@media screen and (min-width: 450px) {
   :root {
    --blue: lightblue;
  }
}

CSS Media Queries

Link to W3Schools

CSS2 Introduced Media Types, TV, printer, computer, handset 等, 不过最后只有 printer 支持的比较好.

CSS3 Introduced Media Queries 它不是通过 type, 而是匹配

width, height of the viewport

width, height of the device

orientation, resolution

格式:

@media not|only mediatype and (expressions) {
  CSS-Code;
}

写 link 也是一个方式

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

举例:

@media screen and (min-width: 480px)

min-width 就相等于 screen 必须超过或等于 480. 就运行下面的 style

反着看就好理解了. min 相等于 >=, max 相等于 <=

CSS Flex Container

Link to W3Schools

Figma 的 Auto Layout 就是用 flex 实现的.

原理是 container + items 来实现布局.

flex-direction

column, row, column-reverse, row-reverse.

打直, 或者打横排列

缺点是只能选一边, 有些场景会排不了, 得要用 grid.

flex-wrap

wrap, nowrap

wrap 是当 item 超出 container 时会 new line, 类似 word-wrap.

nowrap 则会强行挤压 item.

flex-flow

flex-flow 是 shorthand for direction 和 wrap

flex-flow: row wrap;

justify-content

center, flex-start, flex-end, space-around, space-between

horizontal 左中右 align, 还有左右分开.

align-items

center, flex start, flex-end, stretch (拉紧), baseline

vertical 上中下 align, stretch 是上到下覆盖完

align-content

align content 是当有超过 1 个 row 的时候用的

space-between, space-around, stretch, center, flex-start, flex-end

它表达的是多个 row, align-items 和 justify-content 表达的是 1 个 row.

flex 实现居中

用 center 就可以了.

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

CSS Flex Items

Link to W3Schools

order

flex-grow

用来做比例

1,1,8 相等于 width 10%, 10%, 80%

flex-shrink

当 container 小的时候, 会自动压缩 item, shrink 0 可以阻止它

flex-basis

The flex-basis property specifies the initial length of a flex item.

<div style="flex-basis: 200px">3</div>

不是很清楚什么用, 效果和给 width 200px 一样.

flex

shorthand of flex-grow, flex-shrink, and flex-basis

flex: 0 0 200px

align-self

align-self 就是特别设置一个 item 要怎样 vertical align