CSS製作類似瀏覽器標題欄的圓角樣式

2021-09-25 16:19:49 字數 1016 閱讀 7538

圓弧的樣式由元素本身+左右兩個小角組成

首先,將元素設定相對定位+圓角邊框,以及寬高設為:

position: relative;   //相對定位

width: 120px;

height: 40px;

line-height: 40px;

text-align: center;

background-color: #fff;

border-radius: 10px 10px 0 0; //圓角邊框 上邊圓角

然後,用到偽類選擇器:before :after

.corner:before,.corner:after

.corner:before

.corner:after

我們還需要一張10*10畫素的png格式的

左邊corner-left.png

右邊corner-right.png

這裡我可以教大家使用ps製作10*10畫素png格式的

ubuntu 火狐瀏覽器5 0 隱藏標題欄方法

很多同學都對ubuntu中火狐瀏覽器的標題欄無法去除感到深惡痛疾 請注意我說的是標題欄並不是選單欄等等 如今火狐瀏覽器都更新到5.0了ubuntu經典桌面中火狐的這個問題官方還是沒有解決,對於我們這些用本本的同學來說顯示器那是寸寸必爭的,以前使用火狐4.0以前的時候我們可以用compact menu...

瀏覽器相容的css寫法

1.ie6 ie7 ie8相容寫法 color ccc 只ie6支援 color ccc ie6 7支援 color ccc ie7支援 color ccc 0 0 ie8支援 color ccc 9 9 ie6 7 8支援 2.瀏覽器核心代表 ms transform rotate 7deg ms...

瀏覽器位址列背後的logic

曾經有面試題是這樣的 描述在瀏覽器的位址列中輸入 後發生了什麼?1 服務端返回baidu頁面資源,瀏覽器載入html 2 瀏覽器開始解析 3 發現link,傳送請求載入css檔案 4 瀏覽器渲染頁面 5 發現,傳送請求載入,並重新渲染 6 傳送請求js檔案,阻塞渲染。如果js對dom進行了操作,則會...