css3新特性學習系列 border

2022-04-29 04:12:10 字數 1717 閱讀 3644

css3新特性 border屬性(border-radius、border-image、box-shadow)詳解

1、border-radius  圓角

支援:ie9+

用法:

border-radius:25px 25px 25px 25px

有四個值,分別表示 top-left、top-right、bottom-right、bottom-left

2、border-image  邊框

支援:safari5及更早版本,需要字首 -webkit;oprera需要字首  -o;

border-image:url("image/border.png") 27 27 stretch;   /*stretch 拉伸*/

border-image:url("image/border.png") 27 27 round;   /*stretch 平鋪*/

border-image:url("image/border.png") 27 27 repeat;   /*repeat重複*/

border-image:url("image/border.png") 27 stretch/round/repeat;   /*合併相同的引數*/

注意:必須設定border寬度

例項:

border(背景透明)

效果如下,更詳細的解析請移步:

支援:ie9+、chrome、opera、safari5.1.1支援

用法:

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

inset;

h-shadow:水平陰影的位置,允許負值,必須值;

v-shadow:垂直陰影位置,允許負值,必須值;

blur:模糊距離;

spread:陰影尺寸;

color:陰影顏色;

inset:內陰影;

例項:

.border_css3
效果:

CSS3新特性學習

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

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最大的優點,不會影響到其他...