成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS3：不可思議的border屬性

weknow619 / 644人閱讀

摘要：原文譯文不可思議的屬性譯者在中，其屬性有很多的規(guī)則。對于一些事物，例如三角形或者其它的圖像，我們?nèi)匀皇褂脠D片代替。但是現(xiàn)在就不需要了，我們可以用形成一些基本圖形，我分享了一些關(guān)于這方面的技巧。

原文：Magic of CSS border property

譯文：不可思議的CSS border屬性

譯者：dwqs

在CSS中，其border屬性有很多的規(guī)則。對于一些事物，例如三角形或者其它的圖像，我們?nèi)匀皇褂脠D片代替。但是現(xiàn)在就不需要了，我們可以用CSS形成一些基本圖形，我分享了一些關(guān)于這方面的技巧。

1、正三角形： 
.triangle_up
{
  height:0px; width:0px;
  border-bottom:50px solid #006633;
  border-left:50px solid transparent;
  border-right:50px solid transparent;
}
2、倒三角形： 
.triangle_down
{
  height:0px; width:0px;
  border-top:50px solid #006633;
  border-left:50px solid transparent;
  border-right:50px solid transparent;
}
3、左三角形 
.triangle_left
{
  height:0px; width:0px;
  border-left:50px solid #006633;
  border-top:50px solid transparent;
  border-bottom:50px solid transparent;
  float:left;
}
4、右三角形 
.triangle_right
{
  height:0px; width:0px; float:left;
  border-right:50px solid #006633;
  border-top:50px solid transparent;
  border-bottom:50px solid transparent;
}
5、十字街效果 
.crossSquare
{
  height:0px; width:0px;
  border-right:50px solid blue;
  border-top:50px solid gray;
  border-bottom:50px solid red;
  border-left:50px solid yellow;
}

1至5的demo演示（為了演示方便，對源代碼改動了一下）：http://jsfiddle.net/rt8cjtwq/embedded/result/

6、方向箭頭（突出效果，改動了源代碼）

CSS：

.triangle_left
{
  height:0px; width:0px;
  border-left:50px solid #006633;
  border-top:50px solid transparent;
  border-bottom:50px solid transparent;
  /*float:left;*/
}

.triangle_right
{
  height:0px; width:0px; /*float:left;*/
  border-right:50px solid #006633;
  border-top:50px solid transparent;
  border-bottom:50px solid transparent;
}

HTML：

效果：

7、制作一個Delicious Logo：

CSS：

.delociousLogo
 {
   height:100px; width:100px;
 }

 .topleft
 {
   height:0px; width:0px;
   border-top:50px solid #FFFFFF;
   border-right:0px solid #FFFFFF;
   border-bottom:0px solid #FFFFFF;
   border-left:50px solid #FFFFFF;
   float:left;
 }

 .topright
 {
   float:left;
   height:0px; width:0px;
   border-top:50px solid #0000CC;
   border-right:0px solid #0000CC;
   border-bottom:0px solid #0000CC;
   border-left:50px solid #0000CC;
 }

 .bottomleft
 {
   float:left;
   height:0px; width:0px;
   border-top:50px solid #000000;
   border-right:0px solid #000000;
   border-bottom:0px solid #000000;
   border-left:50px solid #000000;
 }

 .bottomright
 {
   float:left;
   height:0px; width:0px;
   border-top:50px solid #999999;
   border-right:0px solid #999999;
   border-bottom:0px solid #999999;
   border-left:50px solid #999999;
 }

HTML：

效果：（左上角的邊框顏色是白色）

原文首發(fā)：http://www.ido321.com/1200.html

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111001.html

相關(guān)文章

  • CSS3主要內(nèi)容

    摘要：必須要準確的放置否則聲明無效。倒影設(shè)置元素的倒影準確的來說不能算是的東西，但需要知道。默認值不可繼承背景漸變漸變是在中新增加的圖片類型使用漸變可以在兩種顏色間制造出平滑的漸變效果用它代替圖片，可以加快頁面的載入時間減小帶寬占用。 CSS3主要內(nèi)容 一、CSS選擇器 ? CSS3選擇器規(guī)范地址： https://www.w3.org/TR/2011/RE...? ...

    X_AirDu 評論0 收藏0

  • CSS3實戰(zhàn)之一些常用Tips

    摘要：本文為部分翻譯文章，主要內(nèi)容來自于，筆者自身也添加了一些自己的小的。設(shè)置自動居中任何一個元素的自動居中可以使用屬性使用逗號分割列表使用負的屬性選擇元素使用作為使用作為圖標可以達到自動縮放的效果。 本文為部分翻譯文章，主要內(nèi)容來自于：css-protips，筆者自身也添加了一些自己的小的Tips。 使用:not()屬性為導(dǎo)航添加或者去除邊框 傳統(tǒng)的方法是首先為每個li標簽添加標簽： /*...

    joywek 評論0 收藏0

  • 重溫HTML和CSS3

    摘要：不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。何為一種腳本語言，是一種動態(tài)類型弱類型基于原型的語言，內(nèi)置支持類型。二代碼規(guī)范在之前很多開發(fā)人員對的代碼規(guī)范知之甚少，在年至年，許多開發(fā)人員從轉(zhuǎn)換到。 重溫Web前端基礎(chǔ) 本篇幅中著重文字，只是記錄一些自己的見解，鞏固下自身基礎(chǔ) 網(wǎng)頁結(jié)構(gòu)是什么？ 結(jié)構(gòu)層 html 導(dǎo)航，列表，段文字，圖片，鏈接，表示層 ...

    Taonce 評論0 收藏0

  • 重溫HTML和CSS3

    摘要：不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。何為一種腳本語言，是一種動態(tài)類型弱類型基于原型的語言，內(nèi)置支持類型。二代碼規(guī)范在之前很多開發(fā)人員對的代碼規(guī)范知之甚少，在年至年，許多開發(fā)人員從轉(zhuǎn)換到。 重溫Web前端基礎(chǔ) 本篇幅中著重文字，只是記錄一些自己的見解，鞏固下自身基礎(chǔ) 網(wǎng)頁結(jié)構(gòu)是什么？ 結(jié)構(gòu)層 html 導(dǎo)航，列表，段文字，圖片，鏈接，表示層 ...

    objc94 評論0 收藏0

  • 圖解CSS3讀書筆記 文本與顏色

    摘要：將內(nèi)容在邊界內(nèi)換行不截斷英文單詞換行語法瀏覽器只在半角空格或連字符的地方進行換行。個人感覺跟類似強行截斷英文單詞，達到詞內(nèi)換行效果。 CSS3文本 css字體類型屬性 font-family, font-style(normal、italic、oblique[傾斜]), font-weight, font-size-adjust(定義是否強制對文本使用同一尺寸,僅火狐支持), font...

    lvzishen 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<