1. 程式人生 > >CSS3的邊框有4種樣式:

CSS3的邊框有4種樣式:

1.border-color(邊框的顏色)

一般設定邊框都有3個屬性-寬度、線的樣式、顏色,如果寬度設定了很多PX,那麼就可以給邊框設定很多顏色,讓邊框顯示出漸變的效果,不過設定邊框不同顏色時只能通過border-bottom-colors,border-top-colors,border-left-colors,border-right-colors-上邊框 下邊框 左邊框 右邊框這樣逐個設定。

如:border: 8px solid #000;

-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc


這個樣式只能被火狐3.0以上識別,別的瀏覽器顯示不出來難過

2.border-image(邊框圖片)

這個樣式可以給邊框新增圖片,讓邊框的樣子更花哨,不過要設定邊框的寬度,不然看不出來

如:border-image:url(img/border.png) 30 30 round( round表示平鋪)(平鋪之後的邊框是圖片大小不變,重複複製鋪滿整個邊框)

border-image:url(img/border.png) 30 30 stretch;(stretch表示拉伸)(拉伸之後的邊框是圖片中部被強行拉伸變形鋪滿整個邊框,上下左右四個角屬於盲區,這個區域的圖片沒有任何變化)

屬性還有個repeat--重複,感覺和round沒什麼區別額疑問

3.border-radius(邊框弧度)

可以把邊框四個直角變的圓滑,甚至可以變成圓形

如:border-radius: 11px;


4.box-shadow(陰影)

可以給有固定寬高的html標籤加陰影

如:box-shadow:5px 2px 6px #000;(數值的含義:陰影水平偏移,陰影垂直偏移,模糊,顏色)(水平偏移和垂直偏移都可以設定負值,陰影的位置就可以在圖形的上方

相關推薦

CSS3邊框4樣式

1.border-color(邊框的顏色) 一般設定邊框都有3個屬性-寬度、線的樣式、顏色,如果寬度設定了很多PX,那麼就可以給邊框設定很多顏色,讓邊框顯示出漸變的效果,不過設定邊框不同顏色時只能通過border-bottom-colors,border-top-col

RandomAccessFile(隨即讀取)操作檔案4模式"r"、"rw"、"rws" 或 "rwd"

'r' 以只讀方式開啟。呼叫結果物件的任何 write 方法都將導致丟擲 IOException。 "rw" 開啟以便讀取和寫入。如果該檔案尚不存在,則嘗試建立該檔案。 "rws" 開啟以便讀取和寫入

Activity 的啟動模式4,分別是standard、singleTop、singleTask、singleInstance

class logs () png img 函數 pan tac span 關於安卓部分知識 Activity 的啟動模式有4種,分別是standard、singleTop、singleTask、singleInstance 1.standar (標準啟動模式) 這是Act

運行 Shell 腳本方法

方式 而不是 pan pri 文件名 二進制 ron linux 系統 腳本 1、作為可執行程序 將上面的代碼保存為 test.sh,並 cd 到相應目錄: chmod +x ./test.sh #使腳本具有執行權限 ./test.sh #執行腳本 註意,一定要寫成 .

SAP與金稅連線方式元件介面及文字介面。

SAP與金稅連線有兩種方式:元件介面及文字介面。 文字介面為例: 1、SAP取發票資料,主要來自合同,銷售訂單,交貨單,發票,客戶供應商主資料等 2、SAP處理:合併,拆分,折扣等 3、匯出TXT文字 4、金稅開票機讀取文字:通過引數傳遞資料,注意1分錢誤差問題(引數傳遞導致) 5、回寫

衝動世界那麼大

“世界那麼大,我想去看看” 類似這樣的衝動,誰沒有過呢? 1 在我職業生涯中的前三次離職,不能說都是這樣的衝動引發的,但肯定其中有它的因素。前三次離職,都不是因為有了更好的工作誘惑,而是裸辭,每次裸辭中間都產生了一次職業生涯的短暫停頓。 在這樣的停頓間隙中,雖然沒能環遊世界,但也確實換了不少地方到處

css3動畫的三寫法

css3的三種寫法:transform、animation+css、transition+css 第一種寫法(transform): #cricle2:hover{transform: translate(100px,100px); } 第二種寫法(animation+cs

CSS3實現的4水波特效

} .circle div.c1 { width:20px; height:20px; margin-left:-10px; margin-top:-10px;

ajax與伺服器傳值方式get 和post的區別

get是把引數資料佇列加到提交表單的ACTION屬性所指的URL中,值和表單內各個欄位一一對應,在URL中可以看到。post是通過HTTP post機制,將表單內各個欄位與其內容放置在HTML HEADER內一起傳送到ACTION屬性所指的URL地址。使用者看不到這個過程。get可以使用瀏覽器的快取機制,別

java算法面試題排序都哪幾方法?請列舉。用JAVA實現一個快速排序。選擇冒泡快速集合至少4方法排序

算法 err div println rda print 算法面試 ++ 快速排序 package com.swift; import java.util.ArrayList; import java.util.Collections; import java.util

在vue-router中要使用選中樣式的方法

1、直接在路由js檔案中配置linkActiveClass 2、在router-link中寫入active-class 問題:如果就這樣,那麼會出現一個問題,不管跳轉到哪裡,跳轉到根目錄的那個連線(to="/")  始終都會有選中樣式        

SS中的三樣式來源創作人員、讀者和用戶代理

最終 插件 evel 想要 開發者 有一個 agen 接口 html CSS中的樣式一共有三種來源:創作人員、讀者和用戶代理,來源的不同會影響到樣式的層疊方式,很多第一次學習CSS的朋友,對這三種來源可能會存在一些困惑,下面我寫一下自己的理解,若有錯誤的地方還請指正。首先,

張書樂原創叫山寨,網文江湖為什麽總是抄襲者成功?

網絡文學尤其是網絡小說開始IP化,並在影視、遊戲和其他周邊產業鏈上發力,動輒數千萬的簽約量下,其實網文平臺不僅對於那些抓取付費內容的盜版者睜一只眼閉一只眼,以期獲得IP影響力的最大化。文/張書樂(人民網、人民郵電報專欄作者)新著有《微博運營完全自學手冊》據媒體報道,近年來,多部由網絡小說改編的影視劇播出後,原

Java並發編程4線程池和緩沖隊列BlockingQueue

rup for public alt 延遲 控制線 [] println 大小 一. 線程池簡介 1. 線程池的概念: 線程池就是首先創建一些線程,它們的集合稱為線程池。使用線程池可以很好地提高性能,線程池在系統啟動時即創建大量空閑的線程,程序將一個任務

第95天CSS3 邊框、背景和文字效果

決定 shadow css3多列 應該 bre column set 動畫 css3   1、CSS3邊框: border-radius:CSS3圓角邊框。在 CSS2 中添加圓角矩形需要技巧,我們必須為每個圓角使用不同的圖片,在 CSS3 中,創建圓角是非常容易的,在

controller 寫法,討論一下兩寫法的區別

controller 有兩種寫法,討論一下兩種寫法的區別: 寫法 1: app.controller('myCtrl', function($scope, $location) { $scope.myUrl = $location.absUrl(); }); 寫法2: app.controller('

優先順序PKJava中的4程式碼塊,誰先誰後?

問題:Java裡的四種程式碼塊,像積木一般搭成程式碼塔。那麼一段複雜的程式碼在JVM裡每一句的執行順序是如何的呢? 思路:看程式碼塊的優先順序順序——>被呼叫的順序 答:要回答這個問題,我們先來看看四種程式碼塊是哪些: 有了定義,還是要具體例子的: public cl

移動網際網路4引流思維免費思維、跨界思維、平臺思維、金融思維

今天給大家分享的是移動網際網路四大思維,這篇文章將以案例為主,易於理解。 思維:通俗來講就是腦洞大開,通過碰撞產生創新性的想法。 好的思維一方面在於工作不斷實踐後的總結獲得,另一方面在於不斷向外界學習和提升獲得,從而結合當前的需求整理出一套可執行的方案或流程。 這裡要分享的四大思維分別是

使用Myeclipse2014建立Maven專案如下幾方式

1、建立Maven Java專案     1.1 選擇新建Maven專案 1.2、選擇建立簡單專案 1.3、填寫專案資訊 1.4、建立成功後項目目錄結構   1.5、建立後pom.xml檔案內容 1 <project xmlns="http

設定差分對,好幾方法,下面我就來一一介紹

轉自https://www.sohu.com/a/152779501_744981 <晶片之家> 原標題:AD PCB-如何設定差分對 設定差分對,有好幾種方法,下面我就來一一介紹: 方法一: 原理圖中直接設定好,然後匯入到PCB中,如圖,給要設定的