CSS3 基礎(1)——邊框圓角背景漸變

css3 簡介

CSS3被拆分為"模塊"。舊規(guī)范已拆分成小塊蚯姆,還增加了新的五续。

一些最重要CSS3模塊如下:

選擇器、盒模型龄恋、背景和邊框疙驾、文字特效、2D/3D轉換郭毕、動畫它碎、多列布局

CSS3?邊框

用 CSS3,你可以創(chuàng)建圓角邊框显押,添加陰影框扳肛,并作為邊界的形象而不使用設計程序

1、盒陰影

{

box-shadow: 10px 10px 5px #888888;? /*左右? 上下? 陰影程度 顏色*/

}

2乘碑、邊界圖片

{

-webkit-border-image:url(border.png) 30 30 round;? /* Safari 5 and older */

-o-border-image:url(border.png) 30 30 round;? /* Opera */

border-image:url(border.png) 30 30 round;? /*round平鋪? stretch拉伸*/

}

3挖息、圓角

border-top-left-radius 定義了左上角的弧度

border-top-right-radius 定義了右上角的弧度

border-bottom-right-radius 定義了右下角的弧度

border-bottom-left-radius 定義了左下角的弧度

四個值: 第一個值為左上角,第二個值為右上角兽肤,第三個值為右下角套腹,第四個值為左下角。

三個值: 第一個值為左上角, 第二個值為右上角和左下角轿衔,第三個值為右下角

兩個值: 第一個值為左上角與右下角沉迹,第二個值為右上角與左下角

一個值: 四個圓角值相同

代碼:

效果圖:

CSS3 背景

background-image:url('');?

background-position: left top;

background-repeat: repeat;

background-size? 指定背景圖像的大小。

代碼1
效果圖1

background-origin?屬性指定了背景圖像的位置區(qū)域害驹。

background-clip?背景剪裁屬性是從指定位置開始繪制鞭呕。

代碼2
效果圖2

CSS3?漸變(Gradients)

CSS3 漸變(gradients)可以讓你在兩個或多個指定的顏色之間顯示平穩(wěn)的過渡。

以前宛官,你必須使用圖像來實現(xiàn)這些效果葫松。但是,通過使用 CSS3 漸變(gradients)底洗,你可以減少下載的事件和寬帶的使用腋么。此外,漸變效果的元素在放大時看起來效果更好亥揖,因為漸變(gradient)是由瀏覽器生成的珊擂。(我覺得性能優(yōu)化了)

線性漸變

從上到下圣勒、從左到右、對角

語法:background: linear-gradient(direction,?color-stop1,?color-stop2, ...);

使用角度

詳細見菜鳥教程:菜鳥教程Gradients

語法:background: linear-gradient(angle,?color-stop1,?color-stop2);

使用多個顏色結點

語法:background: linear-gradient(direction,?color-stop1,?color-stop2, ...);

使用透明度(transparent)

重復的線性漸變

repeating-linear-gradient() 函數(shù)用于重復線性漸變

徑向漸變

徑向漸變由它的中心定義摧扇。

設置形狀

shape 參數(shù)定義了形狀圣贸。它可以是值 circle 或 ellipse。其中扛稽,circle 表示圓形吁峻,ellipse 表示橢圓形。默認值是 ellipse在张。

不同尺寸大小關鍵字的使用

size 參數(shù)定義了漸變的大小用含。它可以是以下四個值:

closest-side

farthest-side

closest-corner

farthest-corner

重復的徑向漸變

repeating-radial-gradient() 函數(shù)用于重復徑向漸變

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市帮匾,隨后出現(xiàn)的幾起案子啄骇,更是在濱河造成了極大的恐慌,老刑警劉巖瘟斜,帶你破解...
    沈念sama閱讀 212,185評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件肠缔,死亡現(xiàn)場離奇詭異,居然都是意外死亡哼转,警方通過查閱死者的電腦和手機明未,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,445評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來壹蔓,“玉大人趟妥,你說我怎么就攤上這事∮度兀” “怎么了披摄?”我有些...
    開封第一講書人閱讀 157,684評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長勇凭。 經(jīng)常有香客問我疚膊,道長,這世上最難降的妖魔是什么虾标? 我笑而不...
    開封第一講書人閱讀 56,564評論 1 284
  • 正文 為了忘掉前任寓盗,我火速辦了婚禮,結果婚禮上璧函,老公的妹妹穿的比我還像新娘傀蚌。我一直安慰自己,他們只是感情好蘸吓,可當我...
    茶點故事閱讀 65,681評論 6 386
  • 文/花漫 我一把揭開白布善炫。 她就那樣靜靜地躺著,像睡著了一般库继。 火紅的嫁衣襯著肌膚如雪箩艺。 梳的紋絲不亂的頭發(fā)上窜醉,一...
    開封第一講書人閱讀 49,874評論 1 290
  • 那天,我揣著相機與錄音艺谆,去河邊找鬼酱虎。 笑死,一個胖子當著我的面吹牛擂涛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播聊记,決...
    沈念sama閱讀 39,025評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼撒妈,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了排监?” 一聲冷哼從身側響起狰右,我...
    開封第一講書人閱讀 37,761評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎舆床,沒想到半個月后棋蚌,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,217評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡挨队,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,545評論 2 327
  • 正文 我和宋清朗相戀三年谷暮,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片盛垦。...
    茶點故事閱讀 38,694評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡湿弦,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出腾夯,到底是詐尸還是另有隱情颊埃,我是刑警寧澤,帶...
    沈念sama閱讀 34,351評論 4 332
  • 正文 年R本政府宣布蝶俱,位于F島的核電站班利,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏榨呆。R本人自食惡果不足惜罗标,卻給世界環(huán)境...
    茶點故事閱讀 39,988評論 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望积蜻。 院中可真熱鬧馒稍,春花似錦、人聲如沸浅侨。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,778評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽如输。三九已至鼓黔,卻和暖如春央勒,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背澳化。 一陣腳步聲響...
    開封第一講書人閱讀 32,007評論 1 266
  • 我被黑心中介騙來泰國打工崔步, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人缎谷。 一個月前我還...
    沈念sama閱讀 46,427評論 2 360
  • 正文 我出身青樓井濒,卻偏偏與公主長得像,于是被迫代替她去往敵國和親列林。 傳聞我的和親對象是個殘疾皇子瑞你,可洞房花燭夜當晚...
    茶點故事閱讀 43,580評論 2 349

推薦閱讀更多精彩內(nèi)容

  • 話題背景:如今網(wǎng)頁展示的姿勢是這樣的 圖片來自:設計之家 炫酷的網(wǎng)頁展示,支撐它的正是強大的CSS3希痴,還有什么理由...
    aliensq閱讀 2,030評論 0 2
  • CSS邊框屬性 元素的邊框就是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線者甲。 元素的邊框屬性: border 簡寫屬性,用...
    Zd_silent閱讀 978評論 0 1
  • 1砌创、屬性選擇器:id選擇器 # 通過id 來選擇類名選擇器 . 通過類名來選擇屬性選擇器 ...
    Yuann閱讀 1,621評論 0 7
  • 日期|體重(kg)|卡路里攝入(kcal)|碳水(%/g)|脂肪(%)|蛋白(%/g)|水(fl oz)|卡路里消...
    podrunner閱讀 453評論 2 0
  • 學了有一小段時間前端了虏缸,今做個CSS的注意點總結!這些都是自己會犯的錯誤嫩实,謹記之刽辙。 1.HTML與CSS中字體的顏...
    蔡鎮(zhèn)泉閱讀 538評論 0 0