收藏本站 收藏本站
積木網首頁 - 軟件測試 - 常用手冊 - 站長工具 - 技術社區
首頁 > CSS/HTML > 正文

首頁 - PHP - 數據庫 - 操作系統 - 游戲開發 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell編程 - DOS命令 - jQuery - CSS樣式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

利用CSS3新特性創建透明邊框三角

先來看一下效果,這在CSS3之前,完全是不可想象的,只有圖片才能做的到,但在HTML5和CSS3大行其道的今天,實現這種效果,那都不是事啊。

查看圖片

看一下實現的代碼:

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>

/* 上三角 */
.arrow-up {
 width: 0;
 height: 0;
 border-left: 20px solid transparent;
 border-right: 20px solid transparent;
 border-bottom: 20px solid green;
}

/* 下三角 */
.arrow-down {
 width: 0;
 height: 0;
 border-left: 20px solid transparent;
 border-right: 20px solid transparent;
 border-top: 20px solid orange;
}

/* 右三角 */
.arrow-right {
 width: 0;
 height: 0;
 border-top: 60px solid transparent;
 border-bottom: 60px solid transparent;
 border-left: 60px solid blue;
}

/* 左三角 */
.arrow-left {
 width: 0;
 height: 0;
 border-top: 10px solid transparent;
 border-bottom: 10px solid transparent;
 border-right: 10px solid silver;
}
</style>
</head>
<body>
 <div class="arrow-up"></div>
 <div class="arrow-down"></div>
 <div class="arrow-left"></div>
 <div class="arrow-right"></div>
</body>
</html>

手機屏幕尺寸測試——手機的實際顯示頁面的寬度
手機站開發遇到一些問題,設計頁面使用多大的尺寸?為此做了一些研究,除IPhone特殊一些外,目前市面上的安卓系統的實際顯示頁面的寬度,都是360px

CSS 使用Sprites技術實現圓角效果
首先來簡單說一下什么是Sprites,Sprites是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去,這樣一來,當

《CSS3實戰》筆記--漸變設計(一)
基于CSS的漸變與圖片漸變相比,最大的優點是便于修改,同時支持無級縮放,過渡更加自然。目前,實現CSS漸變的只有基于Webkit和Gecko引擎的瀏覽器,基

本周排行

更新排行

強悍的草根IT技術社區,這里應該有您想要的! 友情鏈接:b2b電子商務
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP備05050695號
手游棋牌游戏运营
现金提现的棋牌游戏 新平台电子送免费彩金不限id 新时时彩开奖将结果 6码复式二中二共几注 重庆时时怎么注册 香港闪部3肖6码原装版 巴黎人娱场手机登录 pk10计划软件安卓版下载 重庆时时彩破译 幸运飞艇预测软件哪个好 重庆时时官网 众乐游棋牌 新时时彩三星走势图 彩杏娱乐app 赌大小口诀 北京pk10免费计划群