1------border-radius （盒子圓角

???????? border-radius ：border-radius:5px 4px 3px 2px; 左上，右上，右下，左下

2------如果將一個正方形盒子 設為圓形：

?????? 假設? width 200px height 200px

??????????????? border 1px solid red;

????????????? border-radius:3px; 得出：

將 width;100px ? height;100px ?? border-radius:3px; 各減一半 那么盒子的圓角就出來了:

?

?

?

---

?盒子 陰影：

box-shadow{box-shadow:x軸偏移量 y軸偏移量 陰影模糊半徑(陰影顏色的模糊程度)? 陰影擴展半徑 陰影顏色? 投影方式
注意：inset 是指陰影在盒子內部，默認在外部，inset寫到第一個或者最后一個參數位置，其他位置是無效的}

?box-shadow：值有3個時，表示距離左側、距離上側、影子顏色

值有4個時，表示距離左側、距離上側、虛化的像素、影子顏色

?

---

?

顏色RGBA與透明度opcity

|------R：紅 G：綠 B：藍? alpha:透明度的參數

|------RGB的取值范圍是0~255/0~100%?? alpha的取值范圍是0~1? 不可為負值

|------opcity：范圍0-1

漸變顏色

|------background-image: linear-gradient(to bottom,#fff,red);參數說明：第一個參數指定漸變方向 to top,to bottom,to right,to left,to top left......
第二和第三個參數：是指定開始與結束的顏色值? 可以有多個顏色background-image: linear-gradient(to bottom,#fff,black,red);

圖片

|------圖片圓角 border-radius: 50%;（設置橢圓形）

|------設置圖片為響應式? max-width: 100%;height: auto;

|------圖片陰影 box-shadow

|------圖片濾鏡 ?filter

旋轉

|------2D transform

|---------rotate()——進行旋轉，括號內部寫旋轉角度，默認順時針旋轉.允許負值，元素將進行逆時針旋轉

|---------translate()——從當前位置進行移動，括號內為x，y值。允許負值，將反方向移動
transform:translate(30px,30px)：向右30px，向下30px移動，原來位置保存

|---------scale()——改變原始尺寸，按照倍數變化，括號內為width、height的倍數
?transform:scale(2,4)：寬度變為2倍，高度變為4倍

|---------skew()——水平、垂直方向進行扭轉，括號內是水平扭轉角度、垂直扭轉角度
?transform:skew(30deg,0deg);將橫向扭轉30度的div，內部文字會跟隨扭轉
?transform:skew(0deg,30deg);將縱向扭轉30度的div，內部文字會跟隨扭轉
?transform:skew(30deg,30deg);將橫向扭轉30度、縱向扭轉30度的div，內部文字會跟隨扭轉

|------3D transform

|---------rotateX()——沿水平X軸進行垂直的翻轉，括號內寫轉動度數

|---------rotateY()——沿垂直Y軸進行水平的翻轉，括號內寫轉動度數

|------2D與3D的區別

2D轉換跟3D轉換的區別：2D轉換僅僅在于平面，文字可以看出并沒有反過來.3D轉換是相當于鏡面效果的，進行了前后空間（涉及到了Z軸）的占用進行的翻轉。

過渡

|------transition：專門應對顏色、長度、寬度、位置等變化的過渡

?

轉載于:https://www.cnblogs.com/sunchuan88/p/9486382.html

總結

以上是生活随笔為你收集整理的CSS3 常用属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。