CSS3新特性學習

2021-09-16 21:48:26 字數 1718 閱讀 1429

最近發現很多css3的新特性不熟悉，所以今天把它們都學習一邊，做出效果加深印象，說到css3還加了蠻多的特性，像一些border的一些效果，動畫屬性animation trasiform等。

效果

實現**：

height: 100px;


width: 100px;


margin: 0 auto;


background-color: #e0e0e0;


border-radius: 10px
加上下面這兩個是為了相容chrome和fixfox舊版本

-moz-border-radius: 10px;/* chrome */    


-webkit-border-radius: 10px;/* fixfox */
這個屬性很有趣，還可用來畫圓，把值設為百分比，可以畫任意大小的圓

border-radius: 50%;


-moz-border-radius: 50%;/* chrome */


-webkit-border-radius: 50%;/* fixfox */
圓效果

這個可就厲害了，可以做出立體效果，也可以使邊框很炫酷

語法：

box-shadow: h-shadow v-shadow blur spread color inset;    


h-shadow:水平陰影位置


v-shadow:垂直陰影位置


blur:模糊距離


spread：陰影尺寸


color：陰影顏色


inset：內部陰影 預設為outset
效果

**

box-shadow: 10px 10px 4px #a5a5a5;
用在input上

**

box-shadow:0 0 8px 2px #9668db;
設定div的寬高固定，文字太多時會超出div的邊框

我們要實現下面效果，以三個點號代替省略的文字

滑鼠移入時動畫：

樣式

.di
滑鼠移入時

.di:hover

CSS3新特性學習筆記

新選擇器 邊框 背景公升級 圓角 陰影 新的盒模型 漸變 動畫 2d3d轉換 伸縮布局 多列布局 新單位字首應用 瀏覽器相容 漸進增強 語法規則說明 表示全部可選項 表示多選一 代表多選一 代表出現0次或以上 代表出現1次或者以上 代表可選的，即出現0次或1次 代表出現a次 代表出現 a次以上b次以...

CSS3新特性學習（2）

1.2d轉換之移動translate 類似定位 1.語法 transform translate x,y transform translatex n transform translatey n 2.重點 1.定義2d轉換中的移動沿著x和y移動元素 2.translate最大的優點，不會影響到其他...

CSS3有哪些新特性？CSS3新特性詳解

本篇文章給大家帶來的內容是關於css3有哪些新特性？css3新特性詳解，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。新增選擇器 p nth child n 彈性盒模型 display flex 多列布局 column count 5 查詢 media max width 480px...