css3大小 定位 輪廓相關屬性

2022-08-13 09:36:14 字數 772 閱讀 3885

1.大小相關屬性

1.1 css3新增的box-sizing屬性

box-sizing: content-box; -moz-box-sizing: content-box;

box-sizing: padding-box; -moz-box-sizing: padding-box;

box-sizing: border-box; -moz-box-sizing: border-box;

1.2 css3 新增的resize屬性

resize: both;——指定可在兩個方向上調整大小。

resize: horizontal;——指定只可在橫向上調整大小。

resize: vertical;——指定只可在縱向上調整大小。

2.定位 

3.輪廓相關

outline: rgba(50,50,50,0.5) solid 10px

寬度為10的灰色實線輪廓

outline: rgba(50,50,50,0.5) groove 16px

寬度為16的灰色凹槽線輪廓

outline: rgba(50,50,50,0.5) ridge 16px

寬度為16的灰色凸槽線輪廓

outline: rgba(50,50,50,0.5) ridge 10px;outline-offset:10px;

寬度為10、偏移距也為10的灰色虛線輪廓

CSS3外輪廓屬性

外輪廓outline在頁面中呈現的效果和邊框border呈現的效果極其相似,但和元素邊框border完全不同,外輪廓線不占用網頁布局空間,不一定是矩形,外輪廓是屬於一種動態樣式,只有元素獲取到焦點或者被啟用時呈現。outline屬性早在css2中就出現了,主要是用來在元素周圍繪製一條輪廓線,可以起到...

css3屬性小應用

向元素應用 2d 或 3d 轉換。該屬性允許我們對元素進行旋轉 縮放 移動或傾斜。rotate angle 通過指定的角度對元素進行2d旋轉,正值時順時針旋轉,負值時將逆時針旋轉。transform rotate 20deg 利用定時器實現圓圈轉動效果 var tmp 0 function circ...

CSS3中各種定位屬性

定位 position static 預設值,設定座標無效 absolute 絕對定位 特徵 1 脫離文件流,不佔位置 2 預設參考html的00點 瀏覽器零點 3 如果有父級,且父級有定位,那就參考父級元素 預設定位除外 相當於給子元素指定了參考物 座標位置 水平 left right 垂直top...