web(11.16-11.17)

一、css3邊框

1.border-radius

描述：圓角邊框
語法:
border-radius:apx bpx cpx dpx; /依次為邊框左上角，右上角，右下角，左下角的圓角像素/
border-radius:apx; /邊框四個角的圓角像素均為a像素/
實例：給div增加圓角邊框；

div{width:100px;height:30px;line-height: 28px;padding:0 10px;text-align: center;border:solid 1px #999;border-radius: 25px;}

2.box-shadow
描述：邊框陰影
語法：
border-shadow：水平位置 垂直位置 模糊距離 陰影大小 陰影顏色 [內置或外置]
實例：

div{width:100px;height:30px;line-height: 28px;padding:0 10px;text-align: center；border-radius: 25px;box-shadow:0 -3px 5px 3px red inset;}

二、css3背景

1.background-size
描述：規定背景圖片的大小；
實例1：調整背景圖片的尺寸大小

div{background: url("rock600x400.jpg") no-repeat;background-size: 200px 100px;}

實例2：對圖片進行拉伸

div{background: url("rock600x400.jpg") no-repeat;background-size:40% 100%;}

2.background-origin
描述：規定背景圖片的定位位置
語法：background-origin：content-box/padding-box/border-box

值描述

content-box	背景圖像相對于內容框來定位
border-box	背景圖像相對于邊框盒來定位
padding-box	背景圖像相對于內邊距框來定位

實例：

div{width:300px;height:300px;padding:50px;border:solid 30px rgba(255,0,0,.5);background: url("xinnian.png") no-repeat;background-size: 50px 50px;/*background-origin: padding-box;*//*background-origin:border-box;*/background-origin: content-box;}

3.background-clip
描述：規定背景的繪制區域
語法：background-origin：content-box/padding-box/border-box

值描述

content-bobx	背景被裁剪到內容框
border-box	背景被裁剪到邊框盒
padding-box	背景被裁剪到內邊距框

實例：

div{width:300px;height:300px;padding:50px;border:solid 30px rgba(255,0,0,.5);background: url("xinnian.png") no-repeat;/*或背景顏色：background：red;*//*background-clip: padding-box;*//*background-clip:border-box;*/background-clip: content-box;}

三、css3文本效果

1.text-shadow:文本陰影
語法：text-shadow:水平距離 垂直距離 模糊距離 模糊顏色
實例：(以火焰字為例)

p {text-align: center;font:bold 60px helvetica, arial, sans-serif;color: red;text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20; }

2.word-wrap屬性：對長的不可分割的單詞進行換行規則

值描述

normal	只在允許的斷字點換行（默認狀態）
break-word	可以在單詞內部進行換行

3.text-overflow屬性：對溢出文本框的文本的處理規則

值描述

clip	直接修剪文本
ellipsis	溢出文本框餓文本用省略號代替

4.word-break屬性：對文本的換行規則

值描述

break-all	允許在單詞內部換行
keep-all	只能在半角空格或連字符處換行

四、css3字體

在新的 @font-face 規則中，必須首先定義字體的名稱（比如 myFirstFont），然后指向該字體文件，如需使用該字體，需要通過font-family 屬性來引用字體的名稱 (myFirstFont)：
實例：

<style> @font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf'),url('Sansation_Light.eot'); /* IE9+ */ } div { font-family:myFirstFont; } </style>

五、css3過渡

語法：transition：css屬性 完成過渡效果所需時間 完成過渡的速度曲線 過渡何時開始；
實例：

div{width:100px;height:50px;background: red;-webkit-transition:all .5s linear .3s;}div:hover{width:200px;background: blue;}

完成過渡的幾種速度曲線形式：

值描述

linear	均速
ease	慢開始，變快，慢結束
ease-in	慢開始
ease-out	慢結束
ease-in-out	慢開始和慢結束

六、css3 2D、3D轉換方法

語法：transform：方法（參數1,參數2,…）

2d轉換方法描述及實例

translate	從當前位置移動，如：transform:translate(50px,100px);/*元素從左側向右平移50像素，從上向下平移100像素*/
rotate	旋轉給定的角度，如：transform:range(30deg);/*元素在水平面上旋轉30deg*/
scale	元素縮放，如：transform:scale(2);/*等比例放大2倍*/ transform:scale(2,0.5);/*元素寬放大2倍，高縮小為原來的一半*/
skew	元素傾斜，如：transform:skew(30deg);/*元素繞x軸和y軸分別翻轉30度*/ transform:skew(30deg,20deg);/*元素繞X 軸翻轉 30 度，繞 Y 軸翻轉 20 度*/

3d方法使用同上，如：

transform;translate3d(x,y,z); transform:rotate3d(x,y,z,angle); /*x,y,z均為一個0-1之間的值，主要用來描述元素圍繞X,Y,Z軸旋轉的矢量值*/ transform:scale3d(x,y,z);

七、css3動畫

描述：有一種樣式轉化為另一種樣式
實現方法：
1.規定開始和結束的兩種樣式的動畫：（用from與to實現動畫0%和100%的動畫效果）
實例：

div{width:300px;height:200px;animation: move 1s linear .3s 4; /*animation用來設置動畫屬性;語法：animation:動畫名稱 動畫周期時間 動畫完成的速度曲線 延遲時間 播放次數 是否逆放（animation-direction:alternate; 輪流反向播放） */}@keyframes move{ /*move為自定義的動畫名稱*/from{background:red; }to{background: yellowgreen;}}

2.規定多種樣式的動畫：
實例：

div:hover{animation: move 10s linear; }@-webkit-keyframes move{0%{background: red; transform:translate(0px,0px) rotate(180deg) }30%{background: blue;transform:translate(100px,0px) }50%{background: greenyellow;transform:translate(100px,100px) scale(.5)}100%{background: #000;transform:translate(0px,0px)}}

八、css3多列

屬性描述

column-count	規定元素被分割為幾列
column-gap	規定元素各列的間距
column-rule	規定元素各列的間隔線

實例：

p{-webkit-column-count: 4; /*分欄列數*/text-align: justify;-webkit-column-gap: 50px; /*分欄的l欄間距*/-webkit-column-rule:dashed 3px blue; /*分欄的間隔線*/}

九、用戶界面

1.resize 用戶可以調整元素的尺寸

值描述

both	可以調整元素的寬度和高度
horizontal	只能調整元素的寬度
vertical	只能調整元素的高度

注：需要與overflow 屬性一塊使用，overflow可以是 auto、hidden 或 scroll
實例：

p{width:300px;height:200px;margin:50px;border:solid 1px #000;resize: both;/*resize: horizontal;*//*resize:vertical;*/overflow:auto;}

2.outline offset 元素輪廓
實例：

div{ width:300px; height:200px; margin:50px; border:solid 2px blue; background:url("rock600x400.jpg") no-repeat; background-size:100%; outline: solid 2px red; /*定義一個紅色的輪廓線*/ outline-offset: 20px; /*規定輪廓線距元素邊框邊緣20px*/ }

總結

以上是生活随笔為你收集整理的web(css3)的全部內容，希望文章能夠幫你解決所遇到的問題。

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