CSS3的快速記憶

2021-09-19 04:12:35 字數 2127 閱讀 6565

border-radius:25px;

box-shadow: 10px 10px 5px #888888;

這個屬性挺重要的,特別是做的效果時.

box-shadow: 陰影的x偏移值,陰影的y偏移值,模糊值,陰影大小,陰影顏色

其中偏移值可以為負數,陰影大小為0時是與原來一樣大,模糊值越大越模糊

border-image:url(border.png) 30 30 round;

多重背景影象,你可以通過透明影象來實現多個影象的疊加

可以設定多個背景,並這樣設定

background-image: url(img_flwr.gif), url(*****.gif); 

background-position: right bottom, left top;

background-repeat: no-repeat, repeat;

background-size:80px 60px;

定位背景可以放的位置

content-box, padding-box,和 border-box

裁剪這個用到的也是這三個content-box, padding-box,和 border-box

rgba(0, 0, 0, .5);

前三個值:0~255,red,green,blue

最後乙個:0~1   0完全透明,1完全不透明

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

background: linear-gradient(180deg, red, blue);

background: linear-gradient(red, green, blue);

background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

background: repeating-linear-gradient(red, yellow 10%, green 20%);

注意,有個repeating

background: radial-gradient(center, shape size, start-color, ..., last-color);

background: radial-gradient(red 5%, green 15%, blue 60%);

ackground: radial-gradient(circle, red, yellow, green);

text-shadow: 5px 5px 5px #ff0000;

水平陰影,垂直陰影,模糊的距離,以及陰影的顏色

box-shadow: 10px 10px 5px #888888;

水平陰影,垂直陰影,模糊的距離,以及陰影的顏色

多餘的以...來代替

多餘的遮住

單詞換行

規定非中日韓文字的換行規則。

文字最後一行對齊

元素進行移動、縮放、轉動、拉長或拉伸

transform: translate(50px,100px);

transform: rotate(30deg);

transform: scale(2,3);  2倍,3倍

transform: skew(30deg,20deg);   x軸30°,y軸20°

transform:matrix(0.866,0.5,-0.5,0.866,0,0);

transform:matrix(cosθ,-sinθ,sinθ,cosθ,0,0);

12:斜拉,34:縮放,5:旋轉,6位移

為什麼要使用?

解決,寬高相同,而內邊距不同所造成的元素大小不同

如果使用了該屬性,則內邊距也算入寬高中

類似這樣的!

只需要將父容器設定display為flex,然後需要完全居中顯示的子元素設定margin為auto

CSS快速記憶筆記(四)

知識點34 css定位及特點 position 為什麼要用定位?定位 定位模式 邊偏移 重點記憶 將盒子定位在指定的某乙個位置,自由的漂浮在其他盒子 包括標準流和浮動 的上面。標準流在最底層,浮動在中間,定位在最高層 能說出為什麼常用的 子絕父相 布局?邊偏移 定位的盒子,是通過邊偏移來移動位置的,...

CSS3的幾個標籤速記3

transition css3過渡 css3裡很好的乙個標籤,可以非常方便的完成需要很多js才能完成的動態效果 例語法 transition width 2s,height 2s,transform 2s css3動畫 keyframes 使一種樣式逐漸變為另一種樣式的過程 1 doctype ht...

CSS3幾個速記標籤2

font face如果要使用粗體,必須新新增另乙個包含粗體文字的 font face規則 css2d轉換 translate 方法 根據左和上給定引數 語法 transform translate px,px rotate 方法 旋轉,允許負值 語法 transform rotate deg sca...