CSS3 常用属性
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
總結

- 上一篇: 【BZOJ1022】小约翰的游戏(博弈论
- 下一篇: 智能合约遇到的三个大坑